vue简单入门
- vue的安装方式
官网上推荐了三种方式
1.使用cdn的方式，直接在html引入网址，即可使用
2.下载vue.js，手动引入
3.使用npm命令安装（属于node的指令）
第一种每次测试都需要访问网址，不太推荐，第三种后期使用，现在暂时使用第二种方式
- 第一个vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，id就是你要vue挂载的标识
{{message}}属于vue的语法，直接从vue的data（Model层）获取值-->
<div id="app">{{message}}</div>
</body>
<!--导入vue.js-->
<script src="../js/vue.js"></script>
<script>
/*获取vue的对象，参数传递对象类型（options）*/
let app = new Vue({
/*el:告诉vue你要挂载哪个标签*/
el: '#app',
/*data:对象类型，数据存放位置*/
data: {
message: "hello VUEJs"
}
});
</script>
</html>
- vue的MVVM是什么
类似与我们java的mvc模式，vue把整个前端分为了model、view、viewmodel这三类，view只处理显示给用户部分，model则处理接收数据功能，model想要把数据传递给view，则需要通过viewModel传递，而view要监听事件，发送数据给model，则也需要viewModel作为中间商，传递。
viewModel就是上边案例种的vue对象，view则是div这种显示给用户的，model就是vue对象种的data，它可以单独提取出来，数据可以是后台传递的。
- vue的生命周期
vue的生命周期，相当于我们java的servlet的生命周期，就是当vue创建到销毁之间，会调用一些钩子函数，也就是回调函数。例如：当vue创建之前，会调用一个beforecreated函数，我们可以做一些操作，当创建之后，会调用created函数，我们又可以做一些事情。具体的回调函数，上图中都表明了。
- vue的插值操作指令
1.胡须函数（Mustache语法）：
直接在需要显示数据的地方，直接使用‘{{xxx}}’的形式，显示数据，里面xxx，会自动的在vue的data对象里面找对应的值，显示在标签种。
例如：
<1div id=‘xxx’>{{xxx}}<1div>:这里的id一定要给vue去挂载
2 v- once:当我们想要标签里面的内容，只赋值一次，而后面做任何的操作，也不想要改变里面的值的时候，我们可以使用v-once属性，标注在标签上，即可生效。
3 v-html:当我们后台传递的是一个标签的时候，例如a标签，我们不想要之间显示成文本，而是想把a标签解析成html标签，显示时，就可以使用这个来标注。
4 v-text=“xxx”:这个和我们上边使用{{}}方式获取值是一样的，都是将数据显示在页面上
5 v-pre:用于跳过这个元素和它子元素的编译过程，不会去data里面查找值，原本写的是什么就是什么。
6 v-cloak:通常情况下，html代码从上到下执行，当我们执行到html代码的时候，可能还没有经过vue.js渲染，就会显示原来的样子，客户体验不太好，可以使用这个标签，当作属性，然后再css中，编写代码，当没有解析到的时候，隐藏掉。
- vue的v-bind动态绑定
上边我们总结的插入语法，都是让html动态显示数据的，当然我们的html代码中，我们也可以让属性来动态显示，例如我们的a标签中的href属性、img里面的src属性等，我们都可以动态的设置，就需要使用v-bind动态绑定了
语法：v-bind:绑定的属性=“xxx”
这里的xxx是从data里面查找的值。
*：只要是想要把html的属性交给vue管理，就可以使用v-bind的方式。
也可以简写：
:属性名=“xxx”这种方式也是可以的
v-bind绑定class：class里面可以写对象的方式，多个对象使用,分割
格式：
:class=“{key1:boolean1,key2:boolean2…}”
当boolean为true时，对应的class生效，为flase则不生效。
当class样式过多时，我们可以把它封装为一个methods或者computed中，然后返回对象即可。
- vue的计算属性
我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，这个时候就可以使用计算属性了
例如：
这样的方式再html代码中就显得很麻烦，这里只是两个拼接，就已经这么长了。所以我们使用计算属性的方式：
这样就很简洁，不管我们以后写多少，html里面也能很方便的阅读。
标准的计算属性写法：
一般的set我们不会重写，只会重写get方法，也就是计算属性相当于只读的状态，也就是上边第一个那种简写方式，就是默认调用的get方法。
当然，我们这种也可以使用methods方法的形式处理：
我们可以看到，使用方法的时候，方法会调用多次，我们再看一下计算属性：
这里我们就可以看到，执行计算属性时，如果执行的是同一个，那么他就只会执行一次，这就是计算属性的优点，会监听我们的计算属性，如果计算属性发生了改变，就从新执行一次，执行完毕，封装成缓存，下次调用就会调用缓存中的。而方法，就没有缓存这一说，执行几次，就触发几次，效率很低，当我们以后遇到这样场景，尽量多的使用计算属性!
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
