vue
1.什么是vue？
可以独立完成前后端分离式web项目的JavaScript框架
2.为什么要学习vue？
三大主流框架：Angular（脸书）、React（git公司）、vue（中国人第三方）
先进的前端设计模式：MVVM
可以完全脱离服务器，以前端代码复用渲染整个页面：组件化开发
vue框架
vue是前端框架：Angular（脸书）、React（git公司）、vue（中国人第三方）
vue：结合其他框架优点，轻量级，中文API，数据驱动，双向绑定，MVVM设计
模式、组件化开发、单页面应用
vue环境：本地导入与cdn导入（都在代码最下面）
<!--<script src="js/vue.js"> 本地导入-->
<script src="https://cn.vuejs.org/js/vue.min.js"> cdn导入
vue是js渐进式框架
根据开发需求，可以决定vue框架控制项目具体位置，可以为一个标签，也可以为一个页面，甚至整个项目
实例成员-挂载点 el：
vue如何与html页面结构建立关联：挂载点
1.挂载点通常只能找到一个，所以一般会设置id
2.一个vue对象挂载点只能匹配到一个结果，一般会把挂载点用id标识
3.html与body不能作为挂载点
<script>
// 这里是字典对象 vue就是实例
new Vue({
el:'.main', // el就是实例成员
})
// 总结：1.html与body不能作为挂载点
// 2.一个vue对象挂载点只能匹配一个结果，所以挂载点一般使用id'标识
</script>
实例成员-数据 {{ }}：
// 1.用实例成员data为vue环境提供数据，数据采用字典{}形式
// 2.在插值表达式，直接书写数据的key来访问数据
// 3.在外部通过接受实例的变量app,访问实例成员（实例成员都用$开头），间接访问数据 app.$data.info
// 4.在外部也可以通过实例变量app直接访问数据(优化过) app.info
<div id="app">
<!--只要在vue控制的标签中，{{ }}是插值表达式，中间出现的info是vue变量-->
{{info}}
</div>
// 1.用实例成员data为vue环境提供数据，数据采用字典{}形式
// 2.在插值表达式，直接书写数据的key来访问数据
// 3.在外部通过接受实例的变量app,访问实例成员（实例成员都用$开头），间接访问数据 app.$data.info
// 4.在外部也可以通过实例变量app直接访问数据(优化过) app.info
let app = new Vue({
el:'#app',
data:{
info:'message',
num:100,
result:true,
arr:[1,2,3,4,5],
dic:{
name:'kevin',
age:18
}
}
})
</script>
<script>
console.log(app);
console.log(app.$data.num);
console.log(app.num)
</script>
View Code
过滤器（filters）：
语法：{{ num|f}},data里面加上filters书写过滤函数，然后标签渲染
<!-- 插值表达式可以直接做简单运算 --> {{ num+1}}
没有参数过滤器：<p>{{ num | f1}}</p>
有参数过滤器一：<p>{{ 10,20,30,45 | f2}}</p>
有参数过滤器二：<p>{{ 10,20 | f2(30,45)}}</p>
filters:{
f1:function (num) {
return num*2
},
// 总结：{{ a,b,c,d | f1 }} {{ a,b | f1(c,d) }}
f2:function (a,b,c,d) {
return a+b+c+d
}
文本指令 v-text：
语法：v-指令名=变量
<p v-text="info"></p>
v-指令名="常量"，常量采用常量基本语法，数字与布尔类型等可以直接书写，字符串等需要加符号''
<p v-text="'info'"></p>
<p v-text="123"></p>
v-html可以解析html标签语法
<p v-html="'<b>好的</b>'"></p>
<p v-text="'<b>好的</b>'"></p>
js多行字符串``
let s1 = `第一行
第二行
第三行`;
console.log(s1);
let name ='kevin';
let age =18;
let s2 =`
name:${name}
age:${age}
`;
console.log(s2)
事件指令 v-on：
语法一：事件指令：v-on:事件名="事件函数名"
<p class="low_num" v-on:click="lowNum">
<span>点击一下减一:</span>
<span> {{num}}</span>
</p>
双击事件：<p v-on:dblclick="dbAction">双击</p>
语法二：事件名="事件函数" 可以简写成 @事件名="事件函数"
<p @mouseover="overAction()">悬浮</p>
<p @mouseover="overAction(10,20)">悬浮1</p>
<p @mouseover="overAction(10,20,$event)">悬浮2</p>
事件传参：
@事件='函数方法' 默认传入事件对象 $event
@事件="方法（）"，不传入任何参数，
@事件="方法（参数...）'只传递自定义参数
@事件="方法"($event,参数.......)，自定义传入事件对象
<script>
new Vue({
el:'#app',
data:{
num:99,
},
methods:{
lowNum:function () {
// 在vue实例内部的方法中，使用变量
this.num-=1;
// alert(this.num)
},
dbAction:function (ev) {
// this.num-=1;
console.log(ev)
},
overAction:function (a,b,c) {
console.log(a,b,c)
}
}
})
</script>
View Code
属性指令：
1.属性选择器 语法： v-bind:属性名="变量值"
<p id="d1" class="p1" style="" title="" index="">属性指令1</p>
<p id="d2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
2. v-bind:属性名="变量值" 可以简写 ：属性名 ="变量"
<p :index="p1">自定义属性也可以被vue绑定2</p>
<p :title="'文本提示'">悬浮文本提示</p>
3.style样式属性绑定
<p :style="myStyle">样式绑定1</p>
<p :style="{backgroundColor:c1,color:c2,'border-radius':'50%'}">样式绑定2</p>
4.class类属性绑定
<p :class="myc1">样式绑定3</p>
<p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
<p :class="{ccc:ddd}">样式绑定5</p> # ccc是类名
<style>
[index]{
color: orange;
}
.xxx{
background-color: yellowgreen;
color: greenyellow;
border-radius: 50%;
}
.xxx1{
background-color: yellowgreen;
}
.xxx2{
color: greenyellow;
}
.xxx3{
border-radius: 50%;
}
.ttt{
background-color:gold ;
color: yellowgreen;
}
</style>
<script>
new Vue({
el:'#app',
data:{
p1:'q1',
myStyle:{
backgroundColor:'red', // 背景颜色
color:'green', // 字体颜色
'border-radius':'50%', // 画圆
},
c1:'cyan',
c2:'tan',
myc1:'xxx',
myc2:'xxx1',
myc3:'xxx2',
myc4:'xxx3',
ddd:'true',
},
methods:{
// clickAction () {
// this.ddd= !this.ddd
// }
// 点击事件函数二：
clickAction:function () {
this.ddd= !this.ddd
}
}
})
</script>
<!--案例：点击切换类名是否起作用 -->
<p @click="clickAction" :class="{ttt:ddd}">点击切换类</p>
.ttt{
background-color:gold ;
color: yellowgreen;
}
data:{
ddd:'true',
},
methods:{
// clickAction () {
// this.ddd= !this.ddd
// }
// 点击事件函数二：
clickAction:function () {
this.ddd= !this.ddd
}
}
View Code
表单指令：
<div id="app">
<form action="">
<!-- 1.对表单标签value 进行绑定操作 变量 ，不能实时监测 -->
<input type="text" class="inp1" :value="info">
<input type="text" class="inp2" :value="info">
<p class="p1">{{info}}</p>
<style>
.p1{
width: 500px;
height: 21px;
background-color: skyblue;
}
</style>
<hr>
<!--2.表单标签的值由 v-model="变量" 来绑定 操作还是value，但是有实时监测功能 -->
<input type="text" class="inp1" v-model="info">
<input type="text" class="inp2" v-model="info">
<p class="p1">{{info}}</p>
<hr>
<!-- 3.v-model操作单独复选框 - 确认框 -->
是否同意：<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree">
<p>{{isAgree}}</p>
<hr>
<input type="submit">
<hr>
<!-- 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>
<!-- 5.复选框 -->
爱好： 男 <input type="checkbox" name="hobby" value="male" v-model="myhobbys">
女 <input type="checkbox" name="hobby" value="female" v-model="myhobbys">
其他 <input type="checkbox" name="hobby" value="others" v-model="myhobbys">
<p>{{myhobbys}}</p>
<input type="submit">
</form>
<script>
new Vue({
el:'#app',
data:{
info:'123',
isAgree: 'yes',
mysex:'',
myhobbys:[],
}
})
</script>