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>