02.Hello|02.Hello Vue.js 02.HelloVue.js

1.示例使用{{ }}来完成数据绑定

//引入vue.js的script文件{{ message }}

//在script中创建一个vue实例，包括el:元素，data：绑定的数据

new Vue({ el: '#app', data: { message: 'Hello Vue.js 2!' } })

当message改变时，其内容随之改变。
1.1 vue实例的数据

注意：
值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
也就是说如果你添加一个新的属性，那么对新添加的属性的改动将不会触发任何视图的更新。
如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
详情参考官网：https://cn.vuejs.org/v2/guide/instance.html

1.2 vue实例的属性与方法它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = https://www.it610.com/article/{ a: 1 } var vm = new Vue({ el:'#example', data: data }) vm.data=https://www.it610.com/article/==data; //true vm.$data === data; // => true vm.$el === document.getElementById('example'); // => true// $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })

2.指令 2.0 插值的指令，绑定数据

v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

这个将不会改变: {{ msg }}

v-html指令，双大括号会将数据解释为普通文本，而非 HTML 代码。
为了输出真正的 HTML,使用 v-html指令。

Using mustaches: {{ rawHtml }} Using v-html directive:

文章图片
2.1 v-bind 使用v-bind指令来完成属性值的绑定。
缩写，可以省略v-bind，直接：属性名

{{ message }}

new Vue({ el: '#app', data: { message: 'Hello Vue.js 2!', title:'提示信息哟' } })

实现效果：当鼠标悬停在Hello Vue.js 2!上边时，会有提示框显示“提示信息呦”
2.2 v-if,v-else-if，v-else,v-show指令

使用v-if指令控制元素是否显示，当值为true时显示,为false时不显示。

{{ message }}

new Vue({ el: '#app', data: { seen: true, message: 'Hello Vue.js 2!' } })

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别,用法和v-if相同，表示if之外的其他情况。

ABCNot A/B/C

v-show

Hello!

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

2.3 v-for指令

可以用来遍历一个数组

{{ todo.text }}

new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } })

支持item，index作为参数

{{ parentMessage }} - {{ index }} - {{ item.message }}

可以用来遍历一个对象
只有一个参数，返回value值。

{{ value }}

new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } })

有两个参数，返回key，value键值对

{{ key }}: {{ value }}

三个参数，返回key，value，index

{{ index }}. {{ key }}: {{ value }}

尽量在使用v-for时提供key值

2.4 v-on指令添加onclick事件。
缩写@click

{{ message }}

new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { //注册reverseMessage方法 reverseMessage: function () { //this表示创建的vue实例，逆转message的值 this.message = this.message.split('').reverse().join('') } } })