Vue数据绑定

文件安装

开发版本
生产版本

$ npm install vue

基本语法-无序😁

Vue实例

var app = new Vue({
      el: '#app',
      //实例代理属性data
      data: {
        message: 'Hello Vue!',
        seen: true,
        todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
        ],
        html:'<p>这是插入的p标签</p>',
        ...
        filters: {
            capitalize: function (value) {
              if (!value) return ''
              value = value.toString()
              return value.charAt(0).toUpperCase() + value.slice(1)
           }
      },
      //计算属性
      computed:{
          reverseMessage:function(){...},
          //绑定fullName，没有参数默认执行getter，有参数默认执行setter
          fullName: {
            // getter
            get: function () {
                  return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                  var names = newValue.split(' ')
                  this.firstName = names[0]
                  this.lastName = names[names.length - 1]
            }
          }
      },
      //方法
      methods:{
          myclick:function(){...}
      },
      watch:{
          seen:function(){...}
      },
      //钩子函数 
      //mounted当组件被挂载并解析完成后执行
      mounted:function(){
          ...
      },
      ...

})

内容绑定

//内容绑定
<div id="app">{{ message }}</div>

属性绑定

//绑定title属性到message上
<span v-bind:title="message"></span>

v-if
​
//执行的是append和remove 和show有本质的区别
//如果seen为true则now you see 显示，否则no see显示

Now you see me

no see

v-show
​
//执行的是 diplay:none 与 display：block
//不支持给组件设置 如

v-for循环

<ol>
    //建议提供key,以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
    <li v-for="(todo,index) in todos" :key="item.id>               {{ todo.text }}
       </li>
</ol>

//遍历对象不用一一对应，一参 键值，二参键名(可选)，三参索引(可选)
<div v-for="(value, key, index) in object">
      {{ index }}. {{ key }} : {{ value }}
</div>

//取整数
<span v-for="n in 10">{{ n }}</span>
<li v-for="n in evenNumbers">{{ n }}</li> //计算属性
<li v-for="n in even(10)">{{ n }}</li>

//v-for 支持 <template> 循环渲染很多模板--数据需要绑定，不能自动传进组件里
<my-component
      v-for="(item, index) in items"
      v-bind:item="item"
     v-bind:index="index">
</my-component>

事件绑定

<button v-on:click="reverseMessage">Reverse Message</button>
//缩写
v-bind:href="url"  ==  :href="url"
v-on:click="reverseMessage"  ==  @click="reverseMessage"

表单双向绑定

  <input v-model="message">
  <p>{{ message }}</p>

  //需要换行？    white-space: pre直接空格/换行
  <p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

标签插值

//span将被忽略
<div v-html='html'>{{html}}<span>11111</span></div>

模板表达式

//模板表达式中还可以使用 Math 和 Date不能访问用户定义的全局变量
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
//list- 是字符串 id是绑定的变量
<div v-bind:id="'list-' + id"></div>

过滤

//默认参数是message或message表达式的返回值
<div>{{ message | filterA | filterB }}</div>
//传入的参数表示过滤函数的第二参和第三参
{{ message | filterA('arg1', arg2) }}

事件修饰符
​

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

//记不住所有的code？用名字呗
<!-- 同上 -->
<input v-on:keyup.enter="submit">
//enter，tab，delete，esc，space，up，down，left，right

<!-- 没有想用的？自定义喽 -->
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.A = 112

对象/数组语法

//当对象的值isActive为真时 class将会有类名 对象的键  一直都有div的类名
v-bind:class="{ active: isActive, 'text-danger': hasError }" class=‘div’>

//activeClass和errorClass为真时才会被赋值给class
<div v-bind:class="[activeClass, errorClass]">

//样式绑定     --前缀vue会自动添加
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
...清晰的写法...
<div v-bind:style="styleObject"></div>    
data: {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
}

数组方法

如下两项改变data不会重新渲染页面
1，vm.items[indexOfItem] = newValue
    改为：Vue.set(example1.items, indexOfItem, newValue)
    或：example1.items.splice(indexOfItem, 1, newValue)

2，vm.items.length = newLength
    改为：example1.items.splice(newLength)

小提示

• 只有当data属性里的值改变才会重新渲染view视图
• v-once:执行一次性地插值，当数据改变时，插值处的内容不会再更新，静态的使用快速
  • 计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖(data)发生改变时才会重新取值。data不变多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数！但是重新渲染的时候，method 调用总 会执行函数
• 组件内部访问实例属性记得$emit..以便与代理的data属性区分

声明周期示意图