vue.js
最近项目中要用到vue.js，开始学习一下，初步感觉以前AngularJS有很相似之处：
刚写了几个demo，说一下自己对vue的理解:
1,触发事件写在html上面
2,然后在script上面先绑定上哪个事件，el方法
3，data事件是这个方法的属性，
4，methods写方法
然后几个合为一个整体，和angularjs差不多，只不过没有那个看起来紧凑，灵活。不过会比那个简单吧，感觉就跟拼积木一样，拼好了，就是这样，典型西方逻辑思维。
1，直接下载vue.js,和jquery一样，直接引入 <script src="vue.js"></script>
2，刚才写了一个demo，死活出不来想要的答案，最后发现程序还是自下向上执行，要把vue的代码写到下面就可以了
demo1:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="vue.js"></script> 6 </head> 7 <body> 8 9 <div id="app"> 10 {{ message }} 11 </div> 12 13 14 <script> 15 new Vue({ 16 el: '#app', 17 data: { 18 message: 'Hello Vue.js!' 19 } 20 }) 21 </script> 22 </body> 23 </html>
3，这里我们遇到新东西。你看到的 v-if 特性被称为指令。指令带有前缀 v-，以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。继续在控制台设置 exampleVM2.greeting 为 false，你会发现 “Hello!” 消失了。
4，可以使用管道符 ，这个很有意思，可以在前台做筛选
5,双向绑定,在我看来就是一个值使用了两次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app2">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el:'#app2',
data:{
message:'hello vue.js'
}
})
</script>
</body>
</html>
6,循环数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
</script>
</body>
</html>
7.如何将数据第一条循环出来？？？？？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:
{
todos:[
{ "test": "Brett", "text":"McLaughlin" },
]
}
})
</script>
8,控制页面字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'Hello vue.js!',
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
9，综合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
newTodo:'', //input 框内默认显示元素
todos:[
{text:'Add some todos'} //开始默认出现的字
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim()
if(text){
this.todos.push({ text:text })
this.newTodo = ''
}
}, //逗号必须存在
removeTodo:function(index){
this.todos.splice(index,1)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }">333</div>
<script>
var vm = new Vue({
el: '.static', //这里应该加上，否则不显示
data: {
isA: true,
isB: false
}
})
</script>
</body>
</html>
10条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<table id="app">
<tr>
<td v-for="x in test1">{{ x.arr1 }}</td>
<td v-for="y in test1">{{ y.arr2 }}</td>
</tr>
</table>
<script>
var vm=new Vue({
el:'#app',
data:{
test1:{
x:
{
arr1:"[beike,hanmu]"
},
y:
{
arr2:"[shimin,shiye]"
}
}
}
})
</script>
</body>
</html>
11，判断值是否在里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<table id="app">
<tr>
<td v-for="x in test1">{{ x.arr1 }}</td>
<td v-for="y in test1">{{ y.arr2 }}</td>
</tr>
</table>
<script>
var vm=new Vue({
el:'#app',
data:{
test1:{
x:
{
arr1:"[beike,hanmu]"
},
y:
{
arr2:"[shimin,shiye]"
}
}
}
})
</script>
</body>
</html>
12,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js"></script>
</head>
<body>
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
name:'vue.js'
},
methods:{
greet:function(event){
alert('hello' + this.name + '!');
alert(event.target.tagName)
}
}
})
vm.greet();
</script>
</body>
</html>
二,条件渲染还没有理解
浙公网安备 33010602011771号