vuejs学习笔记（一），直接引入vue.js
声明式渲染：<!DOCTYPE ><html><head><title>声明式渲染</title></head><style></style><script sr
·
声明式渲染：
<!DOCTYPE >
<html>
<head>
<title>声明式渲染</title>
</head>
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
{{message}}
<br>
<span v-bind:title="title"><!--"v-bind:"为属性指令，为vue所特有指令-->
Hover your mouse over me for a few seconds to see my dynamically bound title!
</span>
</div>
<script>
var str=[];
str[0]='hello word';
str[1]='You loaded this page on';
var app = new Vue({
el: '#app',
data: {
message:str[0],
title:'pageon' + new Date(),
/*通过el相应的id获取容器，通过data逐项为相应的参数赋值，所赋值可为变量（可通过ajax获取值，进行页面的渲染）*/
}
})
</script>
</body>
</html>条件与循环：
1、条件
<p v-if="seen">Now you see me</p>为相应的标签设置“v-if”指令，通过设置变量‘seen’的值true或者false来控制元素显示与否。
设置变量直接设置true或者false，无需设置为字符串形式。
2、循环
<div id="app-4">
<ul>
<li v-for="todo in tods"><!--前一变量与下面数组变量一致，in后的内容为data变量-->
{{ todo.text }}
</li>
</ul>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
tods: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>处理用户输入：
用 v-on 指令绑定一个监听事件用于调用定义的方法。
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<script>注：
1、split() 方法用于把一个字符串分割成字符串数组。split（''）表示将字符串分解为单个字符（包含空格）。
2、reverse()颠倒数组中元素的顺序
3、join() 方法用于把数组中的所有元素放入一个字符串。
v-model 指令，它使得在表单输入和应用状态中做双向数据绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>根据输入的数值，实时变化显示的数值。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)