vue
渐进式Javascript框架
它可以独立完成前后端分离式web项目,属于组件开发
特点：单页面web应用，数据驱动，数据双向绑定，虚拟DOM
vue
渐进式Javascript框架
它可以独立完成前后端分离式web项目,属于组件开发
特点：单页面web应用，数据驱动，数据双向绑定，虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特点</title>
</head>
<body>
<div id="app">
<h1 @click="action">{{ msg }}</h1>
<h2>{{ msgh2 }}</h2>
<h2>{{ msgh22 }}</h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
//创建vue实例与页面标签进行绑定，该实例就可以控制该标签内部所有的标签
new Vue({
//挂载点，与页面标签绑定的关键，具有唯一性
el:'#app',
//vue中要使用的数据
data:{
msg: 'h1',
msgh2:'',
msgh22:''
},
//methods控制所有事件
methods:{
action:function(){
this.msg = 'h1被点击了';
this.msgh2 = 'h1被点击了';
this.msgh22 = 'h1被点击了'
}
}
});
</script>
</html>
1.插值表达式，v-text，v-html，v-once等代码表述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式-->
<p>{{ msg+num }}</p>
<p>{{ num+1 }}</p>
<!--v-text v-html v-once 三个文本指令-->
<!--v-text:纯文本-->
<p v-text="msg"></p>
<!--v-html：可以解析标签-->
<p v-html="htmlmsg" @click="changemsg"></p>
<p v-html="'<b>变粗吧</b>'"></p>
<!--v-noce：限制修改-->
<p v-once="htmlmsg">{{ htmlmsg }}</p>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
msg:'msg',
num:10,
htmlmsg:'<b>点击我可以变斜吧</b>'
},
methods:{
changemsg:function () {
this.htmlmsg = '<i>斜了</i>';
}
}
})
</script>
</html>
2.事件指令等代码描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="js/vue.js"></script>
<style>
[v-cloak] {
display:none;
}
</style>
</head>
<body>
<!-- 取消闪烁-->
<div id="app" v-cloak>
<!--v-on 指令 ：1）明确事件名 2）明确事件函数 事件名：'事件函数'事件函数万万不可写错-->
<!--基础事件绑定-->
<p v-on:click="clickaction">单击</p>
<p v-on:dblclick="dblclickaction">双击</p>
<!--绑定事件并传参-->
<ul>
<li v-on:click="liaction(1)">{{ li1 }}</li>
<li v-on:click="liaction(2)">{{ li2 }}</li>
<li v-on:click="liaction(3)">{{ li3 }}</li>
</ul>
<!--传递事件对象-->
<p v-on:click="sysaction1">不传自定义参数(默认传个event)</p>
<p v-on:click="sysaction2(1111,$event)">传自定义参数(需要指定传event)</p>
<!--v-on：可以简写为 @ 符号-->
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
li1:'111',
li2:'222',
li3:'333',
},
methods:{
clickaction: function () {
alert('单击')
},
dblclickaction () {
alert('双击')
},
liaction (index) {
// alert(this.li1)
alert(index)
},
sysaction1 (ev) {
console(ev)
},
sysaction2 (num,ev) {
console(num);
console(ev)
}
},
})
</script>
</html>
3.属性指令等代码表述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<script src="js/vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
}
.wrap {
width: 300px;
height: 300px;
background-color: cyan;
}
.box1 {
width: 100px;
height: 100px;
background-color: black;
}
.x {
width: 100px;
}
.y {
height: 100px;
}
.z {
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<!--v-bind属性指令：属性名='属性变量',v-bind: 可以简写为 ： 冒号-->
<!--eg:v-bind:class='myclass'-->
<div class="box" v-bind:style="mystyle" @click="changecolor('red')"></div>
<!--操作单个样式-->
<div class="box" v-bind:style="{ 'width': w }" @click="changewidth"></div>
<!--操作多个样式-->
<div class="box" v-bind:style="more_style" @click="changestyle"></div>
<!--v-bind 可以简写为 冒号, 绑定所有系统和自定义属性，属性一旦绑定，后面就是变量-->
<div :aaa="xxx">简写v-bind</div>
<!--操作单个类名-->
<!--直接赋值-->
<div :class="c1" @click="changeclass"></div>
<!--布尔切换-->
<div :class="{ box1:box_able}"></div>
<!--操作多个类名-->
<div :class="[x,y,{z:is_z}]"></div>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
mystyle:'background-color:pink;',
w:'500px',
more_style:{
width:'100px',
height:'100px',
borderRadius:'50%',
backgroundColor:'cyan'
},
xxx:'zzz',
c1:'wrap',
box_able:true,
x:'x',
y:'y',
// z:'z',
is_z:'z',
},
methods:{
changecolor (color){
this.mystyle = 'background-color:' + color + ';'
},
changewidth () {
this.w = '600px'
},
changestyle () {
this.more_style.borderRadius = '20%';
this.more_style.backgroundColor = 'tan'
},
changeclass () {
if (this.c1 === 'box') {
this.c1 = 'wrap';
}else {
this.c1 = 'box';
}
//布尔值来回切换
this.box_able = !this.box_able;
}
}
})
</script>
</html>
4.表单指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--表单指令 v-model 写法：v-model='变量' 变量value属性提供值-->
<!--数据的双线绑定-->
<input type="text" v-model="val">
<input type="text" v-model="val">
<p>{{ val }}</p>
<form action="">
<!--普通输入框-->
<input type="password" v-model="val">
<!--单选框-->
<!--radio_val 的值是多个单选框中的一个value值，代表该单选框默认选中-->
<p>
<label for="male">nan</label>
<input type="radio" v-model="radio_val" id="male" name="sex" value="male">
<label for="female">nv</label>
<input type="radio" v-model="radio_val" id="female" name="sex" value="female">
<span>{{ radio_val+'被选中' }}</span>
</p>
<!--独立使用的复选框-->
<!--suer_val 的值为 true和false 决定单个复选框是否被选中-->
<p>
<input type="checkbox" name="sure" value="同意" v-model="sure_val">
<span>{{ sure_val }}</span>
</p>
<!--复选框-->
<!--hobby_val的值是数组，用来存放复选框所有选项的值，值存在代表该该框选中-->
<p>
<input type="checkbox" value="male" name="hobby" v-model="hobby_val">
<input type="checkbox" value="female" name="hobby" v-model="hobby_val">
<input type="checkbox" value="other" name="hobby" v-model="hobby_val">
<span>{{ hobby_val }}</span>
</p>
<p>
<input type="submit">
</p>
</form>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
val:'',
radio_val:'male',
sure_val:true,
hobby_val:[]
},
})
</script>
</html>
5.条件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<script src="js/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
.box {
width: 100px;
height: 100px;
}
.b1 {
background-color: blueviolet;
}
.b2 {
background-color: blue;
}
.r {background-color: red}
.g {background-color: green}
.b {background-color: blue}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--条件指令 v-if,v-show v-if:'变量' v-show：'变量'-->
<!--两者都是绑定true 和 false 的-->
<p>
<button @click="showaction(true)">显示</button>
<button @click="showaction(false)">隐藏</button>
</p>
<!--v-if 在隐藏时不会被渲染， 而v-show在隐藏时 是采用display：none -->
<div class="box b1" v-if="is_show"></div>
<div class="box b2" v-show="is_show"></div>
<!--v-if，v-else-if， v-else-->
<p>
<button @click="tagcolor('red')">hong</button>
<button @click="tagcolor('green')">lv</button>
<button @click="tagcolor('blue')">lan</button>
</p>
<div class="box r" v-if="is_color == 'red' "></div>
<div class="box g" v-else-if="is_color == 'green' "></div>
<div class="box b" v-else></div>
</div>
</body>
<script>
new Vue ({
el:'#app',
data:{
is_show:false,
is_color:'red',
},
methods: {
showaction(is_show) {
this.is_show = is_show
},
tagcolor(color){
this.is_color = color
}
}
})
</script>
</html>
