一：基础简介
（1）前段框架简介
（1）angular：
（1）由Facebook开发 适用于大型项目
（2）react：
（1）由GitHub公司开发
（3）Vue：
（1）由中国人尤雨溪开发 吸取了angular与react的优点
（2）Vue框架的优点
（1）轻量级：该框架大小比较小
（2）中文API：由于是中国人开发 操作文档全是中文 对中国人比较友好
（3）数据驱动：DOM元素让DOM文档随着数据的变化而变化
（4）双向绑定：数据层与视图层的同步 当写入数据的时候 视图层跟着发生变化
（5）MVVM的设计模式：将前段与后端分离出来
（6）组件化开发：HTML + CSS + JS协同开发
（7）单页面的应用：为手机节约内存等
（3）渐进式框架：
（1）其可以控制一个标签 一个页面 甚至一个项目
（4）Vue的导入方式
<script src="statict/vue.js"></script> // 本地直接导入
<script src="https://cn.vuejs.org/js/vue.min.js"></script> // cdn 导入
二：实例成员 --- 挂载点
（1）作用：
（1）与HTML页面进行关联
（2）html与body不能作为挂载点
（3）一个vue挂载点之匹配一个结果 因此一般VUE挂载点都使用id
<body> <div id="wrap"> {{ }} <hr> <div class="main"> </div> <hr> <div class="main"> {{ }} </div> </div> </body> <script> <!-- 生成一个vue对象--> new Vue({ // el: '.main' // 与main进行挂载 最下面的main不会被挂载 el:'#wrap' // 与wrap进行挂载 所有的被挂载点都会消失 }) </script>
（2）JS对象（字典）小特性
<script> let age = 18; let user_info = { user:'SR', // 当字典内部的key都是字符串的时候 key中引号可以省略不写 age // 当key中的值为变量的时候 且值与key同名 则值可以不写 age：age }; // age: 18 // user: "SR" console.log(user_info) </script>
三：实例成员 --- 数据
（1）在vue实例中通过data添加数据
<div id="app">
<!--插值式获取值-->
<p>{{age}}</p>
<p>{{name}}</p>
<p>{{address}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{ // 通过data为挂载点添加数据
age:18,
name:'SR',
address:'China',
}
})
</script>
（2）通过插值式获取值
<!--插值式获取值-->
<p>{{age}}</p>
<p>{{name}}</p>
<p>{{address}}</p>
（3）变量接收vue生成的对象 通过变量名访问内部属性（内部属性都是以$开头）
<script> let app = new Vue({ // 变量接收 实例化产生的对象 el:'#app', data:{ // 通过data为挂载点添加数据 age:18, name:'SR', address:'China', } }) </script> <script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.$data.name); // SR console.log(app.$data.age) // 18 </script>
（4）直接通过变量名访问内部的属性
<script> console.log(app); // 获取一个对象 内部对应的方法属性 console.log(app.name); // SR console.log(app.age) // 18 </script>
四：实例成员 --- 过滤器
（1）作用：过滤器本身就是用来处理函数的 其可以将插值式中的数据作为参数传给函数进行处理 得到的函数返回结果就是函数处理后的结果
（2）使用方式：
{{ ...变量 | 过滤器(...变量) }}
（3）过滤器在实例中由filters提供
<div id="app">
<!-- 插值表达式中 可以做些简单的运算-->
<p>{{num + 100}}</p>
<!-- 字符串方法属性-->
<p>{{msg.split('')[0]}}</p>
<!-- 调用过滤器f1-->
<p>{{num|f1}}</p>
<!-- 该函数传多个参数-->
<p>{{ 10, 20, 30, 40 | f2 }}</p>
<!-- 给函数括号内传递两个产生-->
<p>{{ 10, 20 | f2(50, 80) }}</p>
<!-- 传递参数不够 返回Nan-->
<p>{{ 120 | f2 }}</p>
<!-- 函数内部传参过多 网页报错-->
<p>{{ 10, 20, 30, 40，60 | f2 }}</p>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
num: 100,
msg: '消息提示框'
},
filters: {
f1: function (num) {
return num * 2
},
f2: function (a, b, c, d) {
return a + b + c + d
}
}
})
</script>
五：实例成员 --- 文本指令
（1）使用方式：
v-text 渲染普通文本
v-html 渲染html页面
（2）文本指令 可以渲染常量 可以渲染变量
<div id="app">
<p>{{name}}</p>
<!-- 渲染变量-->
<p v-text="name">{{name}}</p>
<!-- 渲染常量-->
<p v-text = '123'></p>
<p v-text = 'true'></p>
<!-- 有特殊符号的加上特殊符号即可-->
<p v-text = '"hello world"'></p>
<p v-text = '"李木子 " + name' ></p>
<p v-text = "[1,2,3,4]"></p>
<!-- 加上html-->
<p v-html><b>hello world</b></p>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
name: 'SR',
age: 18
}
})
</script>
（3）反引号特点：
（1）反引号可以写多行
（2）反引号可以填充变量
<script> let s1 = `第一行 第二行 结束行`; console.log(s1); let name = 'SR'; let age = 18; let s2 = ` name: ${name} age: ${age} `; console.log(s2); </script>
六：实例成员 --- 事件指令
（1）语法：
v-on:事件名="函数名(参数们)
（2）简写
@事件名="函数名(参数们)
（3）使用方式
用methods实例成员提供 事件函数 的实现
<style> body { /*页面文本不允许选择*/ user-select: none; } .low-num { cursor: pointer; } .low-num:hover { color: red; } </style> </head> <body> <div id="app"> <!-- 事件指令：v-on:事件名="事件函数名" --> <p class="low-num" v-on:click="lowNum"> <span>点击减一：</span> <span>{{ num }}</span> </p> <p v-on:dblclick="dblAction">双击</p> <!-- v-on:事件名="事件函数" 可以简写为 @事件名="事件函数" --> <!-- 不传参--> <p @mouseover="overAction()">悬浮</p> <!-- 传递一个自定义参数--> <p @mouseover="overAction(10)">悬浮1</p> <!-- 传递两个自定义参数--> <p @mouseover="overAction(10, 20)">悬浮2</p> <!-- 两个自定义参数 一个事件对象--> <p @mouseover="overAction(10, 20, $event)">悬浮3</p> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: 100 }, methods: { lowNum: function () { this.num -= 1 // 每次点击 num变量减一 }, dblAction(ev) { console.log(ev) // 事件对象 }, overAction(a, b, c) { console.log(a, b, c) } } }) </script>
PS：
（1）@事件="方法" --- > 传递事件参数
（2）@事件 = "方法()" --- > 不传递任何参数
（3）@事件 = "方法(参数)" ---> 自定义参数
（4）@事件 = "方法(参数，$event)" --- > 自定义参数 + 事件对象
七：实例成员 --- 属性指令
（1）语法：
v-bind:属性名="变量"
（2）简写
:属性名="变量"
（3）单值属性绑定
<div id="app">
<p class="p1" id="p1" index="">属性变量1</p>
<!-- 单属性 调用变量p1-->
<p v-bind:class="p1" index="">属性变量2</p>
<!-- 简写方式 :属性名='变量'-->
<p :class="p1" index="">自定义属性 + 变量名简写/p>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
p1:'q1',
}
})
</script>
（4）style多值属性绑定
<div id="app">
<!-- 其调用myStyle这个变量 myStyle调用对应的值-->
<p :style="myStyle">style样式属性一</p>
<!-- 前面的key对应的值 值从变量中获取-->
<p :style="{backgroundColor: c1, color: c2,textAlign:c3}">style样式属性二</p>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
p1: 'q1',
myStyle: {
backgroundColor: 'red',
textAlign: 'center'
},
c1: 'yellow',
c2: 'red',
c3: 'center'
},
})
</script>
（5）class多值属性绑定
<style> .c1 { background-color: antiquewhite; } .c2 { font-size: 100px; } .c3 { text-align: center; } </style> </head> <body> <div id="app"> <p :class="myc1">class单属性</p> <!-- 调用变量myc1 myc2 myc3 所对应的值 其值调用上述css--> <p :class="[myc1,myc2,myc3]">class多属性</p> </div> </body> <script> let app = new Vue({ el: '#app', data:{ myc1:'c1', myc2:'c2', myc3:'c3', } }) </script>
（6）class属性绑定布尔值
<style> .ttt { background-color: gold; color: orange; } </style> </head> <body> <div id="app"> <!--xxx是类名，是否起作用有布尔类型变量yyy值决定 --> <p :class="{xxx:yyy}">样式绑定</p> <!--案例：点击切换类名是否起作用--> <!-- 此时ttt所对应的布尔值为真 被调用--> <p @click="clickAction" :class="{ttt:yyy}">点击切换样式 </p> </div> </body> <script> let app = new Vue({ el: '#app', data:{ yyy:true }, methods:{ clickAction(){ this.yyy = !this.yyy; } } }) </script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
200px;
height: 200px;
background-color: orange;
}
.center {
text-align: center;
line-height: 200px;
}
.rcenter {
text-align: right;
line-height: 200px;
}
.right {
text-align: right;
}
.top {
line-height: 21px;
}
.bottom {
line-height: calc(400px - 21px);
}
</style>
</head>
<body>
<div id="app">
<div class="box" :class="[c1, {right:r, top:t, bottom:b}]" @mouseover="a1" @mousedown="a2" @mouseup="a3" @mouseout="a4">{{ msg }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
a1(){
this.msg = '被悬浮';
// 正中
this.c1 = 'center';
this.r = 0;
this.t = 0;
this.b = 0;
},
a2(){
this.msg = '被按下';
// 右上
this.r = 1;
this.t = 1;
this.b = 0;
},
a3(){
this.msg = '被抬起';
// 右中
this.c1 = 'rcenter';
this.r = 0;
this.t = 0;
this.b = 0;
},
a4(){
this.msg = '被移开';
// 右下
this.r = 1;
this.t = 0;
this.b = 1;
},
},
data: {
msg: '',
c1: '',
r:0,
t:0,
b:0,
}
})
</script>
</html>
八：实例成员 --- form提交表单
（1）基础语法：
v-model="控制vaule值的变量"
（2）:value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
<style> .p1 { 500px; height: 21px; background-color: orange; } </style> </head> <body> <div id="app"> <form> <!-- 此时不会有数据同步--> <p>输入值:<input type="text" :value="num"></p> <p>输入值:<input type="text" :value="num"></p> <p class="p1">{{ num }}</p> <hr> <!-- 此时数据会同步 input框内输入什么 下面变量对应什么--> <p>输入值:<input type="text" v-model="num"></p> <p>输入值:<input type="text" v-model="num"></p> <p class="p1">{{ num }}</p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: '123' } }) </script>
（3）v-model操作单独复选框
<p class="p1">{{ num }}</p>
<hr>
提交:<input type="checkbox" name="agree" v-model="isAgree">
<p>{{isAgree}}</p> // 如果同意下发的isAgree会变成true
<p><input type="submit"></p>
</form>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data: {
num: '123',
isAgree: 0
}
})
</script>
（4）单选框
性别： 男 :<input type="radio" name="sex" value="male" v-model="mysex"> 女 :<input type="radio" name="sex" value="female" v-model="mysex"> 其它: <input type="radio" name="sex" value="others" v-model="mysex"> <p>{{ mysex }}</p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { num: '123', isAgree: 0, mysex: 'others', //默认单选 } })
（5）多选框
兴趣爱好： 乒乓球: <input type="checkbox" name="hobbies" value="pingpang" v-model="myhobbies"> 羽毛球:<input type="checkbox" name="hobbies" value="basketball" v-model="myhobbies"> 排球 :<input type="checkbox" name="hobbies" value="voliball" v-model="myhobbies"> <p>{{ myhobbies }}</p> </form> </div> </body> <script> let app = new Vue({ el: '#app', data: { myhobbies:['basketball','voliball'] // 多选 } })