我梦想有一天，看遍了整个世界后，栖居在一个小城，与世无争。

1.Vue的模块语法

1.1 插值语法

和第一篇输出Hello World 用法一样，在{{}}中插入js表达式即可

功能：用于解析标签体内容。

写法：{{xxx}}中xxx是js表达式，且可以直接读取到data中的所有属性

<div id="id">
    <h1>你好,{{name}}</h1>
</div>
<script>
    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示
    new Vue({
        el:'#id',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择字符串
        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'hello'
        }
    }) 
</script>

1.2 指令语法

Vue中有很多指令，且形式都是：v-????, 此处以v-bind举例，承接上文做一些修改。

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件……）

举例：v-bind:href=”x”或简写为 :href=”x”, x同样要写js表达式且可以直接读取到data中的所有属性

<div id="id">
    <h1>你好,{{name}}</h1>
    <h2>指令语法</h2>
    <a v-bind:href="school.url" v-bind:x="hello">点我{{school.hello}}</a>
    <a :href="school.url" v-bind:x="hello">点我{{school.hello}}</a>
</div>
<script>
    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示
    new Vue({
        el:'#id',
        data:{
            name:'hello',
            school:{
                url:'https://www.baidu.com',
                hello:'你好'
            }
        }
    }) 
</script>

如代码所示，a标签下的url要引用vue中的数据，需要在href前面加上 v-bind 或 :

2.data和el的2种写法

2.1 el的两种写法

2.1.1 new Vue时候配置el属性

Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
new Vue({
   el:'#root',
   data:{
        name:''
    }
})

2.1.2 先创建Vue实例，随后再通过v.$mount(‘#root’)指定el的值。

Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const v = new Vue({
   data:{
        name:''
    }
})
v.mount('#root')

2.2 data的两种写法

2.2.1 对象式

new Vue({
    el:'#id',
    data:{
        name:''
    } 
})

2.2.2 函数式

new Vue({
    el:'#id',
    data:function(){
        return{
            name:''
        }
    }
})

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。子组件中的data必须写成函数式，因为data如果是对象的话，会影响其它组件的数据。

一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

3.Vue的数据绑定方式

3.1 单向数据绑定(v-bind)

数据只能从data流向页面。譬如以以下代码为例：

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

打印在网页上为：

在网页hello输入内容刷新依然为hello

在vue插件上保存修改数据，页面上的数据才会改变，所以才叫做单向数据绑定。

3.2 双向数据绑定(v-model)

数据不仅能从data流向页面，还可以从页面流向data。

<div id="root">
    双向数据绑定：<input type="text" v-model:value="name">
</div>
<script>
    //vue实例的另一种写法
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
    const v = new Vue({
       data:{
            name:'hello'
        }
    })
    v.mount('#root')
</script>

ps：1. 双向绑定一般都应用在表单类元素上(如：input、select等) 2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

<!-- 简写 -->
双向数据绑定：<input type="text" v-model="name">

4. vue实例实现快捷化

这里以vscode举例，vscode不仅操作界面简洁，而且内含丰富的前端插件，支持多种语言编写，被誉称“宇宙最强编译器”

1.打开左下角设置选择用户代码片段

2.点击之后正上角出现一排选项，选择如下

3.进入之后根据注释提示编写相关代码，这里我直接给出两种对象式编译Vue实例的方法，你们可以根据自己的需求进行取舍，快捷按键v1或v2生成固定代码，这样编写的速度和效率是不是提高了呢？

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"v1": {
		"prefix": "v1",
		"body": [
			"Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示",
			"new Vue({",
			"   el:'#root',",
			"   data:{",
			"		name:''",
		    "	}",
			"})",
		]
		"description": "v1"
	}
	"v2": {
		"prefix": "v2",
		"body": [
			"Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示",
			"const v = new Vue({",
			"   data:{",
			"		name:''",
		    "	}",
			"})",
			"v.$mount('#root')"
		]
		"description": "v2"
	}
}

呜呜~，看到这还不点赞加收藏？