# vue框架学习笔记
# 安装部署
# cdn(内容分发技术)在线引用
注意：cdn是在线引用框架或者库，如果没有网络，则出错，所以通常应用在生产环境。
制作原型或学习，你可以这样使用最新版本：
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
如果项目要上线：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
# 本地引入
制作原型或学习，你可以这样使用最新版本：
如果项目要上线：
- vue框架文件下载完毕，则在文档的头部引入
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
# 快速了解vue框架
# 创建一个vue实例
<div id="root"></div>
<script>
//1. 创建一个vue实例，这样div#root元素及其子元素则可以使用vue各项特性。
var root = new Vue({
el:'#root'
})
</script>
# vue特性
# {{}}(大胡子)内可以计算表达式
<div id="root">
{{1+1*2/2*4}} <br>
{{ 'hello'+20 }} <br>
{{ 'abcd'.slice(0,2) }} <br>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root'
})
</script>
# 条件语句
单条件语句
<div id="root">
<h2 v-if="age>=18">成年</h2>
<h2 v-else>未成年</h2>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root',
data: {
age: 15
}
})
</script>
多条件语句
<div id="root">
<h2 v-if="score<60">未及格</h2>
<h2 v-else-if="score>=60 && score<=70">及格</h2>
<h2 v-else-if="score>70 && score<=80">良好</h2>
<h2 v-else-if="score>80 && score<=90">优秀</h2>
<h2 v-else>恰噶</h2>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root',
data: {
score: 75
}
})
</script>
特别注意：
v-if和v-else或者v-else-if直接不能插入其他任何标签，会报错。
# 循环语句
<div id="root">
<button v-for="p in 5">{{p}}</button>
<ul>
<li v-for="name in navs">{{name}}</li>
</ul>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root',
data: {
navs: ['首页','关于我们','产品中心']
}
})
</script>
# 处理用户输入
<div id="root">
<h2>{{msg}}</h2>
<button v-on:click="fanzhuan()">反转</button>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root',
data: {
msg: '今天的天气还不错！'
},
methods: {
fanzhuan(){
//this实际上就是vue的实例
this.msg = this.msg.split('').reverse().join('');
}
}
})
</script>
双向绑定用户输入框
<div id="root">
<input type="text" v-model="username"> <br>
<h2>{{username}}</h2>
</div>
<script>
//1. 创建一个vue实例
var root = new Vue({
el:'#root',
data: {
username: '张三2'
}
})
//v-model
//1. 绑定到 value，实现一刷新数据同步到value
//2. 绑定到 input事件，实现数据输入时同步到value
</script>
# 组件化
我们知道系统给我们提供的组件非常少，而且兼容性各大浏览器也是不一样，为了方便我们开发，我们可以采用vue开发工作组件，然后再系统界面构建过程中，通过组装的方式拼凑成一个完整界面，高效复用。