1、简单认识Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡
2、Vue.js安装
CDN引入
直接下载然后引入，script方式引用
npm方式安装
注意开发环境版本（vue.js）和生产环境版本（vue.min.js）的区别：开发环境版本有所有的js代码，包括注释，警告信息，用于开发的时候用，体积比较大；生产环境版本就是项目上线的时候用，所有代码整合成了一行，去掉了注释和警告信息，用于项目实际上线的时候用，体积比较小。
<!DOCTYPE html>
<html lang="en">
<head>
<!--引入vue.js-->
<script src="../js/vue.js"></script>
<meta charset="UTF-8">
<title>vue.js第一课</title>
</head>
<body>
<!--定义一个id为app的盒子交给vue接管-->
<div id="app">{{message}}{{message2}}</div>
</body>
<script>
//实例化Vue对象
let app = new Vue({
//el是element（元素）的缩写，接管id为app的盒子，id选择器
el: '#app',
//定义数据
data: {
//上文中用{{message}}取得数据
message: 'hello,',
message2: 'Vue.js',
}
});
</script>
</html>
1.用script的方式引入vue.js
2.创建id为app（自定义）的div盒子
3.再写script代码
4.先new一个Vue对象，参数是el（上文的元素），data（定义数据），名叫app（自定义）接管上5.文的id叫app的盒子，并且定义数据
6.最后在盒子里面用{{数据名}}就可以获取到定义的数据了
7.data里的数据可以直接定义，也可以从后端或者服务器加载
3、事件v-on
在vue中可以使用v-on:事件名="方法名(参数列表)"来调用事件，比如调用单击事件就用v-on:click，双击事件就用v-on:dblclick等等其他事件，同时也可以简写成@click或者@dblclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一：手动 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二：CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ts}}</h1>
<!-- 示例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
<input type="text" v-model="num"/><br />
<button v-on:click="doKeyup()">提交</button>
<!-- 示例二:只有当实例被创建时data中存在的属性才是响应式的 -->
{{name}}<br />
<!-- 示例四:用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num"/><br />
<button v-on:click="deIncrement()">++</button>
<!-- 示例五：v-once -->
<span v-once>{{num}}</span>
</div>
</body>
<script>
var vm=new Vue({
el:'#app', // DOM 元素，挂载视图模型，(element:管理边界)
data:function(){
return{
ts:new Date().getTime(),
num:10,
name:'ls'
}
},
methods:{ // 定义方法，用于事件交互时使用的函数
doKeyup:function(){
console.log(this.num);
},
deIncrement:function(){
this.num=parseInt(this.num)+1;
console.log(this.num);
//示例四：局部访问和全局访问
//局部访问：this
//全局访问：vm
console.log("num=%d,name=%s",this.num,this.name);
}
}
});
vm.name="zs";
</script>
</html>
4、Vue的MVVM模式
MVVM分为三个部分：
M（Model，模型层）：主要负责业务数据相关；
V（View，视图层）：负责视图相关，比如网页的Dom
VM（ViewModel，Model层和View层的桥梁）：负责监听M然后对V进行修改，实现M和V的双向绑定。当M层的数据发生修改时，VM层会监测到变化然后立马对V层的数据也进行修改。反之，当V层的数据发生修改时，VM层也会监测到变化然后对M层的数据进行修改。
总的来说就是Model层和View不会直接相互操作，然后通过中间的一层VM层进行互相联系，降低了耦合。
而且Vue中大部分时间中Vue就是充当了VM层，我们作为程序员只需要做好View层和Model层就好了，因为Vue已经帮我们自动监听加解析加修改。
5、Vue的生命周期
和微信小程序开发类似，在Vue.js里每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。同时生命周期的钩子函数是通过Vue实例的options对象的属性值传递给Vue的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js的生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
let app = new Vue({
//绑定上文的元素
el: '#app',
//定义数据
data: {
message: 'Hello,Vue.js!'
},
//定义方法
methods:{
},
//生命周期函数：created（Vue实例被创建后运行的函数）
created:function () {
console.log('lifeCycle--->created函数执行');
}
});
</script>
</body>
</html>
这是Vue实例的生命周期图示：
红线标注的都是执行到对应的生命周期的时候会调用的生命周期钩子函数
6、Vue.js的插值操作
6.1 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一：手动 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二：CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ts}}</h1>
<!-- 示例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
<input type="text" v-model="num"/><br />
<button v-on:click="doKeyup()">提交</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app', // DOM 元素，挂载视图模型，(element:管理边界)
data:function(){
return{
ts:new Date().getTime(),
num:10,
}
},
methods:{ // 定义方法，用于事件交互时使用的函数
doKeyup:function(){
console.log(this.num);
}
});
vm.name="zs";
</script>
</html>
6.2 用v-model指令在表单控件元素上创建双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 方式一：手动 -->
<!-- <script src="js/vue.js" type="text/javascript"></script> -->
<!-- 方式二：CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ts}}</h1>
<!-- 示例四:用v-model指令在表单控件元素上创建双向数据绑定 -->
<input type="text" v-model="num"/><br />
<button v-on:click="deIncrement()">++</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#app', // DOM 元素，挂载视图模型，(element:管理边界)
data:function(){
return{
ts:new Date().getTime(),
num:10,
name:'ls'
}
},
methods:{ // 定义方法，用于事件交互时使用的函数
doKeyup:function(){
console.log(this.num);
},
deIncrement:function(){
this.num=parseInt(this.num)+1;
console.log(this.num);
}
});
</script>
</html>
6.5 v-once
有的时候可能需要View的数据不根据Model的数据动态变化，就可以使用v-once指令。
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello,Vue.js!',
},
});
</script>
</body>
这就是我所学的Vue入门，如果有什么不足的地方，欢迎评论
