Vue学习笔记 - 基础知识 [1]

Vue

Vue 模板语法的2大类

1 插值语法

功能：用于解析标签体内容。
写法：{{ xxx }}, xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。

2 指令语法：

功能：用于解析标签，（包括：标签属性、标签体内容、绑定事件。。。）
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”, xxx同样要写 js 表达式，且可以直接读取到data中的所有属性。
备注：Vue 中有很多的指令，且形式都是：v-???。

Vue 有2种数据绑定的方式

1. 单向绑定（v-bind）：数据智能从 data 流向页面。
2. 双向绑定（v-model）：数据不进能从 data 流向页面，还可以从页面流向 data。
   备注：
   1. 双向绑定一般都应用在表单类元素上（如：input、select等）
   2. v-model :value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值。

el 与 data 的两种写法

el 的两种写法

// 创建 Vue 实例
const vm = new Vue({
	//el:'#root', // 第一种写法，el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{ // data中用于存储数据，数据供el所指容器使用，值我们暂时先写成一个对象。
		name: 'Nix',
		address: '吉林长春'
	}
})
console.log(v)
v.$mount('#root') // 第二种写法

data 的两种写法

// data 的两种写法
new Vue({
    el:'#root',
    // data 的第一种写法：对象式
    // data:{
    //     name:'Nix'
    // }
    // data 的第二种写法：函数式
    data(){
        console.log('@@@', this) // 此处的 this 是 Vue 实例对象
        return{
            name:'Nix'
        }
    }
})

MVVM 模型

1. M：模型（Model）：对应 data 中的数据
2. V： 视图（View）：模板
3. VM：视图模型（ViewModel）：Vue 实例对象