Vue 使用-白红宇

1.

1).

2). 引用


     或者：

3). Hello World

html


     
        {
    { message }}

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

2. 使用

1). 绑定元素特性

html


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

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

2). 切换元素是否显示

html


       
      现在你看到我了

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

3). 循环

html


       
          
             {
    { todo.text }}

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

4). 事件监听器

html


       
      {
    { message }}

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 }}

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

6). 组件

html

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

7). 组件添加属性

html

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 // => truevm.$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 特性甚至不会被包含在渲染出来的

4). 缩写

v-bind缩写


     ...
     ...

v-on缩写


     ...
     ...