Vue 使用

1. Vue

1). Vue文档

2). 引用

或者：

3). Hello World

• html

  {{ message }}

• js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
// 修改文本
app.message = 'mazaiting'

2. 使用

1). 绑定元素特性

• html

    
        鼠标悬停几秒钟查看此处动态绑定的提示信息
    

• js

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于' + new Date().toLocaleString()
    }
})

2). 切换元素是否显示

• html

  
现在你看到我了

• js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
// 设置为false时不显示
app3.seen=false

3). 循环

• html

  

    

      {{ todo.text }}
    
  

• js

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
// 新增
app4.todos.push({ text: '新项目' })
// 移除
app4.todos.pop()

4). 事件监听器

• html

  
{{ message }}
  逆转消息

• js

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

5). 表单输入和应用状态之间的双向绑定

• html

  
{{ message }}
  

• js

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

6). 组件

• html

• js

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '
这是个待办项
'
})

7). 组件添加属性

• html

• js

Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

8). 停止响应更新

var obj = {
  foo: 'bar'
}
// 禁止响应更新
Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

9). 实例属性和方法

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

10). 生命周期

图1.png

3. 模板语法

1). 文本

• 不改变数据

// 一次性地插值，当数据改变时，插值处的内容不会更新。
这个将不会改变: {{ msg }}

2). 原始 HTML

// 输出网页代码
Using mustaches: {{ rawHtml }}
// 输出渲染后的代码样式
Using v-html directive: 

3). 特性

// 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的  元素中。
Button

4). 缩写

• v-bind缩写

...

...

• v-on缩写

...

...