每个 Vue 应用都需要通过实例化 Vue 来实现。
- 一、Vue资源引入
- 1、引包
- 二、Vue的语法模板
- 1、基础模板
- 2、Vue模板的插值与数据属性详解
- 3、数据驱动视图
- 4、MVVM设计模式
一、Vue资源引入
之前已经讲过了如何创建一个基本的项目helloworld项目，现在我们可以开始给项目加页面，首先我们打开index.html,
1、引包
如果我们是使用npm install，那么此时我们可以输入以下语句
<script src="./node_modules/vue/dist/vue.min.js"></script>
所有的vue包都会在node_modules/vue/dist/vue.min.js目录下。
二、Vue的语法模板
1、基础模板
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<body>
<div id="app">
<!-- vue的模板语法 {{}}双大括号插值-->
<h2>{{msg}}</h2>
</div>
<script type="text/javascript">
//如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:{//数据属性
//即可以使对象，也可以是函数
msg:"Hello Vue",
},
template:"<div>{{msg}}</div>"
})
</script>
</body>- 可以看到在
Vue构造器中有一个el参数，它是 DOM 元素中的id。在上面实例中id为vue_det，在div元素中：<div id="app">，这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响（将该vue元素绑定到特定的div）。 -
data用于定义属性，实例中有一个属性为：message，就像c++类的属性一样。既可以是一个元素，也可以是一个函数。 -
template定义模板，如果模板中定义了显示的内容，那么优先加载模板，无定义内容才加载div #app的内容。
接下来我们看看如何定义数据对象。
-
methods用于定义的函数，可以通过return来返回函数值。 -
{{ }}用于在div中输出对象属性和函数返回值，因此我们的div写成了下面的丫子，即可以返回vue对象的属性，也可以调用一个method，输出这个method的返回值。
2、Vue模板的插值与数据属性详解
<body>
<div id="app">
<!-- vue的模板语法 {{}}双大括号插值-->
<h2>{{msg}}</h2> <!--可以插Vue对象的数据元素-->
<h3>{{1==1}}</h3> <!--可以插二元运算-->
<h4>{{isTrue}}</h4>
<h2>{{str.split('').reverse().join('')}}</h2> <!--可以插js方法-->
<h3>{{1>2?"你学会了Vue":"你啥都不会"}}</h3> <!--可以插三元运算式-->
</div>
<script type="text/javascript">
//如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:{//数据属性
//即可以使对象，也可以是函数
msg:"Hello Vue",
isTrue: 1==1,
str:"I am VsCode!",
},
//template:"<div>{{msg}}</div>"
})
</script>
</body>然后我们使用{{}}来看看Vue到底支持我们插入哪些东西？运行结果如下：
可以看到，只要是加了{{}}都可以插值并展示，但是{{"张三"}}可以有而{{张三}}是不允许的，不加引号会被认为是一个方法，但是我们可以这样玩 {{ {name:"张三"} }}传递一个对象进去，
我们可以使用console.log(vm);（将该语句加到script中）来观察一下定义的vue对象，用浏览器打开网页，F12后在console栏目下可以查看
<script type="text/javascript">
//如果template中定义了内容，那么优先加载模板，无定义内容才加载#app的内容
vm = new Vue({
el: "#app", //绑定的Dom对象,#一定要有
data:{//数据属性
//即可以使对象，也可以是函数
msg:"Hello Vue",
isTrue: 1==1,
str:"I am VsCode!",
},
//template:"<div>{{msg}}</div>"
})
console.log(vm);
</script>
可以看到除了我们定义的一些数据属性，vue实例还暴露了一些有用的实例属性和方法，这些自定义的方法都有前缀$，这些自定义的方法极大的遍历了我们的操作，将刚才的console语句改成这样
console.log(vm.$el);
console.log(vm.data)再打开我们的console面板，
可以看到通过vm.$el的方式，起到了一个getelementbyId的操作，直接拿到了div元素，而不加$就会显示不出来，将代码改为
console.log(vm.$el===document.getElementById('app'));
console.log(vm.$data)就可以正常的拿到数据，并且验证了我们的vm.$el操作，其实有点像jquery。
3、数据驱动视图
Vue中最为重要的部分，当数据发生改变时，视图也会发生改变。你改变了Vue的某个属性值，相应的Dom元件里面的内容也会发生改变。
4、MVVM设计模式
一般的项目分为三个，model，view和controller，model主要是数据视图，与MySQL，SQL有关，view即视图，包括了html和其他的一些模板语法，controller是路由，即如何得到数据处理数据，对view进行渲染，简称为路由。
那么Vue做了个什么事情呢？Vue将视图层整个拿了出来，并提出了MVVM的设计模式，MVVM：Model，View，viewModel。Model即我们刚才新建Vue对象的数据，这些数据我们刚才是写死的，但是其实它是需要从DB里面拿出来的。View即我们刚才绑定的Dom，那个id是app的div，他负责在视图层显示我们的数据。而viewModel呢，就是两个{{}}，这就组成了最重要的数据驱动视图的思想。
