Vue.js安装

1. 下载到本地， 在项目文件中直接引入
2. NPM安装

Vue的渐进式

简单使用

1. 在项目中引入

   <script type="text/javascript" src="js/vue.js"></script>
   

2. 建立基本元素

   1. v-for进行循环遍历显示
   2. 当代码加载到这一个代码块，还未执行第三个代码块时，页面上显示的还是原有东西{{message}}，只有当它加载了Vue对象，就会把页面当中的东西替换掉。

      <div id="app">{{message}}
      <div>{{s1}}</div>
      <ul>
        <!-- 遍历movies  创建li  写入数据 -->
        <li v-for="item in movies">{{item}}</li>
      </ul>
      </div>
      

3. 建立Vue对象，传入一个对象参数，绑定元素

   1. 创建Vue时，options可以放 el data methods 生命周期函数等

      const app = new Vue({
      el: '#app',    // 用于挂在要管理的元素
      data: {        // 定义数据
        message:'kon ni chi wa',
        s1: 'kon ban wa',
        movies: ['星际穿越', '教父', '大鱼', '哈利波特']
      }
      });
      

      原始JS将数据动态写入标签时，需要 获取元素、定义值、将值放入元素，这种方式叫做命令式编程
      VUE的这种赋值方式叫做声明式编程，将数据与页面分离
      若data中的数据值发生改变时，页面上显示的数据也会自动跟着改变 — **响应式**

• 但有些改变不会产生响应式，有些方法可以
• 对数组this.names[0] = 'ldf'，页面上的内容不跟随改变 新版好像可以
• 可以产生响应式的方法有：
  • push() 在尾部添加
  • pop() 弹出并删除最后一个元素
  • shift() 删除数组中的第一个元素
  • unshift() 在头部添加
  • splice() 删除、插入元素 array.splice(start, end[, str]) end为 0 时就不删除元素
  • sort() 排序
  • reverse() 颠倒 反转
  • Vue.set(array, 下标, 值)

    生命周期

    图：
    
    图中，绿色的是内部实现的；红色的是钩子，交由用户实现的
    常用生命周期函数：
    created() 创建(组件)后
    destroyed() 销毁后。一般情况时，从一个组件跳转到另一个组件中时，前者即被销毁，除非使用了 keep-live
    mounted() 挂载后
    activated() 组件被激活后

插值 Mustache语法

1. 即 {{message}}，又称双大括号语法
   1. 只有当该内容出现在被管理的范围内时，才会被解析出来
   2. 只能直接使用在首尾标签的内部
   3. 当头标签里面的属性要用到 data 中的数据时，需要 v-bind
2. 响应式，当数据更改时 页面上的内容也会立刻变化
   1. 若元素加上v-once指令，则不能被再次改变值

3. v-html指令的使用，将字符串中的html标签解析出来

   <div id="contain">
        <h3 v-html="data_url"></h3>
    </div>
   
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">        
        const app = new Vue({
            el: '#contain',
            data: {
                data_url: '<a href="http://www.biying.com">必应</a>'
            }
        })
    </script>
   

4. 在双大括号中可以使用简单的表达式

   1. 比如：{{message + text}}，{{count * 2}}
5. v-pre指令，将标签内的双大括号以原始样子 {{}} 显示
6. v-cloak指令。在某个标签中加上该指令，可以用来控制解析之前标签的显示与否等
   1. 在vue解析之前，标签中的该指令存在
   2. 在vue解析之后，标签中的该指令消失

语法

动态绑定属性 v-bind

1. v-bind指令，用来动态绑定标签中的各种属性值 ```html

morning~

afternoon

55

• {{key}}-{{value}}