首先需要引入Vue文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
插值表达式：
{{ 表达式 }}
{{“hello world”}}
{{1}}
{{true}}
{{[1,2,3,4]}}
{{ { a:1,b:2 } }}
表达式为对象的表达式为对象的时候，前后的空格不能省略，两个花括号为表达式；
简单的数学的运算
{{ 1+1 }}
{{ "hello" + "world" }}
插值表达式中需要用到的值必须先在data中存在的，因为vue是数据驱动视图的
作用域链不存在的时候，会error，原型链不存在的时候，是undefined
数据发生改变以后，视图应该是发生相应的渲染
数组通过length,[ ] 改变以后不能渲染视图
在vue中，重写了数组的7个方法，这7个方法可以对应的渲染视图，数组的变异方法
push , pop, shift, unshift, sort, splice,reverse
vue中，如果只没有发生改变，不会去渲染视图
var vm = new Vue({
el : "#app", //渲染的模板
data： { //可以放所有的数据
name : "hh",
arr : ["hello","world'],
obj : {
name : "jack",
age : 18
}
}
}
指令：
<div id="app">
<!-- 1.v-pre,标签中的内容不需要通过vue的渲染，直接保持最原始的模样 -->
<div v-pre>{{ "hello world" }}</div>
<!-- 2.v-cloak 解决用户看不到{{}}的情况，必须配合css -->
<div v-cloak>{{ "hello world" }}</div>
<!-- 3.v-once 只能渲染一次，vue里面有内部的缓存，视图中的值从缓存中读取 -->
<div v-once> {{ name }} </div>
<div> {{ age }} </div>
<!-- 4.v-html innerHTML 里面的值一定要可靠的来源，不可靠的值可能造成xss攻击-->
<div v-html="dom">sdfsdfs</div>
<!-- 5.v-text innerText -->
<div v-text="name">hello</div>
<div>hello,{{name}}今天是1105</div>
<!-- 6.v-if -->
<!-- 7.v-else-if 不要有第三者 -->
<!-- 8.v-else 不要有第三者 -->
<!-- <div v-if="flag">hello</div>
<div v-if="flag">world</div> -->
<!-- <div v-if="!flag">
<div>hello</div>
<div>world</div>
</div> -->
<template v-if="flag"> <!-- template模板的意思，可以减少dom渲染的次数，没有任
何的含义 -->
<div>hello</div>
<div>world</div>
</template>
<!-- 9.v-show -->
<h1 v-show="!flag">hello world</h1>
<template v-show="flag">
<div>hello</div>
<div>world</div>
</template>
v-if和v-show的区别？
1.v-if是删除这个dom节点,v-show控制css中的display属性，v-if的效率更高
2.v-show是不支持template