vue.js-vue实例、生命周期钩子、文本插值、表达式

vue实例和数据绑定

• 创建Vue实例

var app = new Vue()

仅仅是创建Vue实例是不够的额，要确定Vue实例是应用在哪一个DOM节点，要挂在对应的节点上。每一个Vue实例都要对应HTML中的一个DOM元素，也就是说Vue.js的创建是通过构造函数Vue来创建一个根实例，并启动应用。

   <div id = "app">
        {{msg}}
    </div>

//仅仅是创建Vue实例是不够的额，要确定Vue实例是应用在哪一个DOM节点，要挂在对应的节点上。
        var app = new Vue({
            el: "#app",//必不可少的选项，用于指定页面已经存在的DOM元素，挂载到DOM中。
            //用于声明应用内需要绑定的数据
            data: {
               msg: "Vue学习开始了"
            }
        })

• 必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签，也可以是css语法。
• 通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明，这样不至于将数据散落在业务逻辑中，难以维护。也可以指向一个已经有的变量。
• 挂载成功后，我们可以通过
  app.$el
  来访问该元素。

   console.log(app.$el)
   console.log(app.$data)

image.png

• 访问data中的属性

data: {
               msg: "Vue学习开始了",
                a: 2
            }

//访问data中的属性
  console.log(app.msg)
  console.log(app.a)

image.png

生命周期钩子

• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用 ---还未挂载
• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready() ---刚刚挂载
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。
• 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

• 举例

var app = new Vue({
            el: "#app",//必不可少的选项，用于指定页面已经存在的DOM元素，挂载到DOM中。
            //用于声明应用内需要绑定的数据
            data: {
               msg: "Vue学习开始了",
                a: 2
            },
          created:function(){
              alert('我是vue实例，创建完成，还未挂在到DOM')
            },
          mounted:function(){
                alert('我是vue实例，已经挂在DOM')
          }

        });

还未挂载截图

还未挂载.PNG

已经挂载截图

image.png

文本插值

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

Vue .js 只支持单个表达式，不支持语句和流控制。
{{ 6+6 *3}}---可以进行简单的运算 <br>
{{ 6<3 ? msg :a}}---可以用三元运算符 <br>
{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式
{{var a = 6}}--也是多行表达式----var a ;a = 6;
〈！一这是语旬，不是表达式 一〉
{ { var book = ’ Vue . js 实战 ’ ｝｝
〈！一不能使用流控制，要使用三元运算 一〉
{{ if (ok) return msg ))