前端框架
主流框架:angular(facebook家的),react(github家的),vue(尤雨溪的)
vue:有前两大框架的有点,摒弃了缺点,但是没有前两大框架健全,
vue有点:中文API,单页面应用,组件化开发,数据双向绑定,虚拟DOM,数据驱动
VUE
导入
-
下载:https://cn.vuejs.org/进入官网,起步,下载
-
导入,
<script src="js/vue.js"></script> -
之后可以创建vue实例并通过el方法挂载,进而控制.
vue的操作
插值表达式
<body>
<div id="test">
<p>{{ msg }}</p>
<p>{{ num + 1 }}</p>
<p>{{ msg + num}}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('')}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#test",
data:{
msg:"orange",
num:10
}
})
</script>
>>>
orange
11
orange10
r
[ "o", "r", "a", "n", "g", "e" ]
注意:当使用vue语法时,{{}}中如果什么都不放,语法解析不出来,会显示{{}}.
文本指令
{{ }}直接传值
v-text:不能解析html语法,直接传值.
v-html:可以解析html语法.
<div id="text">
<p v-text="info">123</p>
<p v-html="info"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#text",
data:{
info:'<i>infor</i>',
},
})
</script>
>>>
<i>infor</i>
infor
而且代码从上至下执行,如果原p标签中有值,会被后面执行的v-html或者v-text覆盖掉
v-once
无论多少操作,只渲染一次.
<body>
<div id="text">
<p v-once v-on:click="pClick">{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#text",
data:{
info:'<i>infor</i>',
msg:'1111'
},
methods:{
pClick:function () {
this.msg = "222"
}
}
})
</script>
>>>
1111
渲染一次1111,后面再也改变不了了
事件指令
事件指令 v-on:事件名="方法变量"
简写: @事件名="方法变量"
<body>
<div id="event">
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<p @click="f2($event,'第一个')">{{ info }}</p>
<p @click="f2($event,'第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#event",
data:{
msg:"点击事件",
info:"是我"
},
methods:{
f1(){
this.msg ="点击了"
},
f2(ev,args){
this.info = args + "点击了"
}
}
})
</script>
关于鼠标的操作:@后面的
| 方法 | 操作 |
|---|---|
| mouseove | 鼠标悬浮 |
| mouserout | 鼠标移开 |
| mousedown | 鼠标点下去 |
| mouseup | 鼠标抬起来 |
| mousemove | 鼠标在上面移动 |
| contextmenu | 右键点击 |
@事件="变量($event,...)"
当事件变量不添加(),系统默认传入一个事件对象:$event
当事件变量后手动添加了(),就告诉了系统不需要再传入事件对象,但是可以手动传入事件对象.
属性指令
v-bind:属性名="变量"
简写 :属性名="变量"
简单使用
<body>
<div id="property">
<p v-bind:title="pTitle" :abc="def">简答使用</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#property",
data:{
pTitle:"简单使用"
}
})
</script>
class属性绑定
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
200px;
height:200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-right: 20%;
}
</style>
</head>
<body>
<div id="property">
//可以通过传值的方式传多个
<p :class="c0"></p>
//多类名可以使用[]语法,采用多个变量来控制
<p :class="[c1,c3]"></p>
//[]中也可以使用常量
<p :class="['d1',c3]"></p>
//{类名:布尔值} 可以控制某类名是否起作用
<p :class="['d1',{d2:is_true}]" @click="is_true=!is_true"></p>
//点击事件改变src属性
<p @click="changeImg">大长腿</p>
<img :src="img_src" alt="">
//style控制样式样式
<p :style="myStyle">样式属性</p>
<p :style="{w,height:h,backgroundColor:bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#property",
data:{
c0:"d1 d2",
c1:'d1',
c2:"d2",
c3:"d3",
is_true:true,
img_src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
myStyle: {
'100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods:{
changeImg(){
this.img_src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
})
</script>
注意:data的style中:左侧比如backgroundColor:属性名:驼峰体="减号连接体"
is_true这种也可以不引号