Vue数据绑定、指令、事件

1、 Vue实例和数据绑定

Vue.js的环境搭建有两种方式：一种是直接引用script，第二种是用vue脚手架工具vue-cli搭建。先简单说一下第一种引用如下：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

示例：

<div id='app'>
  {{mgs}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var app=new Vue({
    el:"#app",    //注意id对应的要加个#
    data:{
      mgs:"vue学习开始了"
    }
  })
  console.log(app.$el)
  console.log(app.$data)
  console.log(app.mgs)
</script>

通过上述例子，总结一下Vue几点入门知识点
1、通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用---入口（模板如下）

var app ＝new Vue({
el:'',
data:{}
})

2、必不可少的一个选项就是el，el用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签，也可以是css语法。

3、 通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护，也可以指向一个已经有的变量。

4、挂载成功后，我们可以通过app.$el来访问该元素。Vue 提供了很多常用的实例属性与方法。访问Vue实例的属性都是以$开头的，如app.$el和app.$data。但是访问data元素的属性：直接app.属性名，如app.msg

2、生命周期钩子

  <div id='app'>
      {{mgs}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">  </script>
  <script>
      var app = new Vue({
          el: "#app",
          data: {
              mgs: "vue学习开始了"
          },
          created: function () {
              alert('我是Vue实例，创建完成，但未挂载到DOM上')
          },
          mounted: function () {
              alert('我是Vue实例，已经挂载到DOM上')
          },
      })
  </script>

效果自己可以复制本章节代码进行演示，下面总结几个关于生命周期钩子要点：

1、created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el还不可用，通常在需要初始化处理一些数据时会比较有用。

2、 mounted挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。相当于 jquery---$(document).ready()---刚刚挂载。

3、beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

3、文本插值和表达式

语法：使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

上述示例中进行演示
在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算 、 三元运算等，注意在｛｛｝｝中Vue .js 只支持单个表达式，不支持语句和流控制。

实例如下：

1、{{ 6+6 *3}}---可以进行简单的运算
2、{{ 6<3 ? msg :a}}---可以用三元运算符
3、{{if(6>3){}}---注意：文本插值的形式，其中不能书写表达式,支持单个表达式开头，比如el，Vue实例本身也代理了data对象里的所有属性，所以可以这样访问：访问vue实例的属性---app.data ---
4、{{var a = 6}}--也是多行表达式----var a ;a = 6;
5、{ { var book = ’ Vue . js 实战 ’ ｝｝---这是语句，不是表达式
6、{{ if (ok) return msg ))---不能使用流控制，要使用三元运算