vue基本操作

我们先不管为什么，我们先理解他的逻辑。 在这个例子里我们的

{{message}}

就是视图层，而

new Vue({
el:’#app’,
data: {
message:’hello vue.js.’
}
});

就是数据层，在使用Vue.js之前，我们都需要先像这样实例化一个Vue对象。 里面有四个常用的属性，el、data、methods、components。

el:声明vuejs管理的边界，类似于angular的ng-app，把数据绑定给谁。 上面的例子中将数据绑定给了#app。
data:专门存储一些数据的属性，数据一定是对象格式。 上面的例子中给message赋值hello vue.js!
methods:专门放置我们的事件的方法
components:创建组件

回到上面的例子el指定了#app，data存放了数据message，然后利用表达式{{}}将数据显示到页面。

接下来再看个例子：

{{ message }}

new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})

这里用到了新的指令v-model，其作用就是接收用户输入的一些数据，直接就可以将这些数据 挂载到data属性里面，使得实现双向数据绑定更加容易。

接下来介绍一些常用的指令：

v-if:通过判断加载内容，若为真加载，为假时删除元素

Now you see me

new Vue({
el: ‘#app’,
data: {
seen: true
}
})

v-for:控制html元素的循环，实现数据列表

1. {{ todo.text }}

new Vue({
el: ‘#app’,
data: {
todos: [
{ text: ‘Learn JavaScript’ },
{ text: ‘Learn Vue’ },
{ text: ‘Build something awesome’ }
]
}
})

v-show:元素会始终渲染并保持在dom中，并且安全性没有v-if高，因为v-show 用法和v-if相同，只是v-show将元素display设置成none，并不是将元素直接移除
v-else:元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:给页面中html属性进行绑定，拥有缩写“:”，也推荐使用缩写

style

data:{
img:”img/logo.png”,
styles:{color:’red’,fontSize:’30px’}
}

可以缩写成这样

style

v-on:对页面中的事件进行绑定,使用方法 v-on:click="函数名称",函数就是存放在methods属性里的方法名，例如

点击

methods:{
oclick:function(){
alert(1);
}
}

也有缩写“@”