Vue2基础 02：模板语法和数据绑定

1 模板语法

• 插值语法
  • 形式为：{{xxx}} xxx为js表达式
  • 常用于解析标签体内容<> 这里 </>
  • <h1>hello，{{name}}!</h1>
• 指令语法
  • 用于解析标签（即标签内属性 HTML attribute）
  • 形式为：v-????
  • <a v-bind:href="xxx"></a> // 加“v-bind:”后xxx被当作js表达式

“v-bind:” 可简写为 “：”

2 数据绑定

2.1 小案例

    <div id="root">
        <input type="text" v-bind:value="name"><!--单向数据绑定-->
        <input type="text" v-model:value="name"><!--双单向数据绑定 -->
        <input type="text" v-model="name">
    </div>
    
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        
        const vm = new Vue({
            el:'#root',  
            data:{ 
                name:'world'
            }
        })
    </script>

只修改v-bind绑定的输入框，此时只是页面的修改，实例中的数据并没有修改

只修改v-model绑定的输入框

在控制台查看此时vue实例中的data，说明实例中的数据被修改了

2.2 v-model

• 数据能从data流向页面，也可以从页面流向data
• 只能用在表单类元素（输入类元素）上：有value值
• v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

3 el 与 data的两种写法

这两个是Vue框架中比较重要的属性。

el（element）：

• el选项用于指定Vue实例所管理的DOM元素，它可以是一个选择器字符串或一个DOM元素。
• Vue将会控制el指定的DOM元素及其内部的内容。当Vue实例创建时，它会自动将模板编译成渲染函数，并替换el所指定的DOM元素及其内部的内容。这样，Vue实例就会管理el所指定的DOM元素下的所有子节点，使其成为Vue的一部分。

data：

• data选项是用来定义Vue实例的数据对象。它包含了Vue实例需要响应式更新的数据，可以是各种类型，如基本数据类型（字符串、数字等）、对象甚至是数组。
• 在Vue实例中，可以通过this.$data来访问数据对象，也可以在模板中通过双大括号的插值语法或指令语法来使用这些数据。
• Vue会递归地将data中的属性转换为getter/setter，使得当这些属性被访问或修改时，能够自动触发视图的更新。

3.1 对象式写法

const v = new Vue({
    el:'#root',  
    data:{ 
        name:'world'
    }//data对象式写法
})
console.log(v)

控制台显示如下：

$开头的都是Vue为程序提供的，作用是为了区别 Vue 实例中的数据名称等相同（防止重名）。

3.2 函数式写法

const v = new Vue({
    data:function(){
        console.log('@@@',this)
        //此处的this是Vue实例对象，因为这个函数是被Vue调用的
        return{
            name:'world'
        }
    }
 })

v.$mount('#root')
//与在Vue中的el:'#root'相同

mount： 挂载，Vue实例解析之后就是挂载在页面的指定位置，也就是让Vue实例控制页面中的某个区域的过程，称之为挂载。

关于data写法需要注意的是：

1. 不能写成 箭头函数 data:()=>{}
   写成箭头函数后this就不是Vue实例了，而是window。
2. 可简写为

    data(){
        return{
            name:'world'
        }
    }

3. 组件的data都得用函数式写法，否则会报错。