前置知识
学习过html+css、JavaScript
两种学习路径
稳扎稳打 
先用起来，再理解
讲解方式
贯穿案例+知识点讲解
如何学习
听课 -> 思考总结 -> 练习 -> 询问 -> 听课 -> ...
vue官网地址：https://cn.vuejs.org/
什么是vue？
vue是一个前端开发框架，用于降低UI复杂度
UI: user interface 用户界面
vue的特点
渐进式
响应式
组件化
体验vue代码
开发工具：Visual Studio Code
常用插件：
Auto Rename Tag：能够自动更改结束标签
Live Server：自动搭建本地服务器
Prettier - Code formatter：代码美化
Vetur：但vue组件格式支持
vscode-icons：美化文件图标
速写属性
速写方法
箭头函数
模板字符串
通过new Vue({...})创建的对象
配置对象中的部分内容会被提取到vue实例中：
data
props
methods
computed
让vue实例控制网页中某个区域的过程，称之为挂载
挂载的方式：
通过el:"css选择器"进行配置
通过vue实例.$mount("css选择器")进行配置
被vue实例控制的页面片段
模板的作用是什么？
为了提高渲染效率，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM
模板书写到哪？
在挂在的元素内部直接书写
在template配置中书写
在render配置中用函数创建
模板中写什么？
静态内容
插值：{{JS表达式}}，mustache语法
指令
v-html：绑定元素的innerHTML
v-bind:属性名：绑定属性
v-on:事件名：绑定事件
v-if：判断元素是否需要渲染
v-show：判断元素是否应该显示
v-for：用于循环生成元素
v-bind:key：用于帮助在重新渲染时元素的比对，通常和v-for配合使用，以提高渲染效率
v-model：语法糖，用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件
模板中的代码环境
模板中所有的JS代码，它的环境均为vue实例，例如{{title}}，得到的结果相当于是vue实例.title
基本模板
<div id="app">
{{message}}
</div>
<script>
var vm =new Vue({
el: "#app",
data: {
message:"hello word"
}
});
鼠标悬停
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app2 =new Vue({
el:"#app-2",
data:{
message: "test"
}})
</script>
循环与判断
#判断
<dir id="app">
<h1 v-if="xuanze===‘a‘">A</h1>
<h1 v-else-if="xuanze===‘b‘">B</h1>
<h1 v-else-if="xuanze===‘c‘">C</h1>
<h1 v-else>on</h1>
</dir>
<script src="test.js">
</script>
var aapp =new Vue({
el:"#app",
data:{
xuanze:"a"
}
});
-------------------------------------------------------
#循环
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: ‘#app-4‘,
data: {
todos: [
{ text: ‘学习 JavaScript‘ },
{ text: ‘学习 Vue‘ },
{ text: ‘整个牛项目‘ }
]
}
})
绑定事件
方法必须都放在methods里
<div id="app">
<button v-on:click="test">点我</button>
</div>
<script>
var appp=new Vue({
el:"#app",
data:{
message:"lala"
},
methods:{
test:function(){
alert(this.message)
}} });
</script>
?
双向绑定
<div id="app">
输入：<input type="text" v-model="message"/>{{message}}
</div>
<script>
var appp=new Vue({
el:"#app",
data:{
message:" "
}});
</script>
<div id="app">
选则：<input type="radio" name="sex" value="男" v-model="xuanze"/>男
<input type="radio" name="sex" value="女" v-model="xuanze"/>女
<p>选中了：{{xuanze}}</p>
</div>
<script>
var appp=new Vue({
el:"#app",
data:{
xuanze :" "
}});
</script>
js组件
<div id="app">
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script>
Vue.component("qinjiang",{ //名字
props: ["qin"], //配置数据
template: ‘<li>{{qin}}</li>‘ //配置模板
});
var vm=new Vue({
el:"#app",
data:{
items: ["java","linux","qian"]
}
});
</script>原文：https://www.cnblogs.com/Liguangyang/p/13230740.html