指令
文件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!-- 1)插值表达式-->
<p>{{ msg }}</p>
<p>{{ 1+2*3+'条'+msg }}</p>
<!-- 2）v-text-->
<p v-text="msg"></p>
<p v-text="'msg'"></p><!-- 取消转译 -->
<!-- 3）v-html：能解析html代码语法-->
<p v-text="html_msg"></p>
<p v-html="html_msg"></p>
<!-- 4）v-once:结合插值表达式来使用，变量值一旦被初始化赋值后就不会再改变-->
<input type="text" v-model="val">
<p>{{ val }}</p>
<p v-text="val"></p>
<p v-html="val"></p>
<p v-once>{{ val }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
html_msg: '<b>html代码语法是否解析</b>',
val: '000'
}
})
</script>
</html>
属性指令
# 1.v-bind:属性名="变量"
# 2.简写=>> :属性名="变量"
# 3. :class="变量"| :class="{类名:is_able}"| :class="[类1变量，...，类n变量，]"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.cls_a {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.cls_b {
text-align: center;
line-height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<!--属性指令：v-bind-->
<div id="app">
<!--1)自定义属性绑定变量-->
<p v-bind:abc="a"></p>
<!-- 2)title属性-->
<p title="鼠标悬浮的文本提示">这个一个p段落</p>
<p v-bind:title="my_title">这个一个p段落</p>
<!-- 3)class属性-->
<!-- 重点：v-bind:可以简写为 ：-->
<p :class="my_class">这个一个p段落</p>
<!-- {类名：类是否起作用，。。。}类是否起作用 写的是变量，变量的值为true或false-->
<!-- 应用场景：通过一个变量真假控制一个类名是否起作用-->
<p :class="{x:1,y:0,z:is_able}">这个一个p段落</p>
<!-- [类名1，...，类名n]：多类名，每个类名既可以是字符串常量也可以是变量-->
<p :class="[o,p,q,'oqp']">这个一个p段落</p>
<!-- 多类名综合使用-->
<p :class="[o,p,q,'oqp',{k:true},{h:false}]">这个一个p段落</p>
<!-- 4)style属性-->
<p :style="my_style">这个一个p段落</p>
<p :style="{color:'red',backgroundColor:yellow}">这个一个p段落</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
a: 'A',
my_title: '鼠标悬浮的文本提示',
my_class: 'cls_a cls_b',
is_able: true,
o: 'O',
p: 'P',
q: 'Q',
my_style: {
color: 'red',
// 'font-size':'30px',
fontSize: '30px'
},
yellow: 'greenyellow'
}
})
</script>
</html>
事件指令
# 指令: v-on:事件名="方法变量"
# 简写: @事件名="方法变量"
# 简写: @事件名="方法变量()" =>不是方法的调用，而是用于传参
# 简写: @事件名="方法变量('普通参数'，'$event')"=>$event是事件参数，可以通过它得到鼠标点击的相关信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<style>
body {
/*不允许页面文本被选中*/
user-select: none;
}
</style>
</head>
<body>
<!--指令：v-on:事件名='变量'-->
<!--简写:@事件名='变量'-->
<div id="app">
<p v-on:click="fn1" :style="{color:m_c}">{{ msg }}</p>
<p @mouseover="fn2" @mouseleave="fn3" @mousedown="fn4" @mouseup="fn5 ">{{ msg }}</p>
<!-- 事件需要参数时-->
<!-- 注意：事件绑定 方法名() 等价于 方法名，不能调用方法，而是作为传参的标志-->
<p @click="func('abc')">{{ msg }}</p>
<!-- 类别django传参的应用场景，可以标志具体点击的是哪个li-->
<!-- {% for %}-->
<!-- <li @click="fun({{ forloop.index }})"></li>-->
<!-- {% end for %}}-->
<p @click="func1($event)">{{ msg }}</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你是p',
m_c: 'red',
},
methods: {
func1: function (ev) {
console.log(ev);
//数据点击页面的点击点
console.log(ev.clientX);
console.log(ev.clientY)
},
func: function (txt) {
this.msg = txt
},
fn1: function () {
if (this.m_c == 'red') {
this.m_c = 'blue'
} else {
this.m_c = 'red'
}
},
fn2: function () {
this.msg = '鼠标悬浮了'
},
fn3: function () {
this.msg = '鼠标离开了'
},
fn4: function () {
this.msg = '鼠标按下了'
},
fn5: function () {
this.msg = '鼠标抬起了'
}
}
})
</script>
</html>
表单指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<!-- 指令:v-model="变量"-->
<form action="" method="get">
<!-- 1)数据的双向绑定-->
<!-- 注意一定要加name属性-->
<input type="text" v-model="msg" name="username">
<input type="password" v-model="msg" name="password">
<!-- 2)单选框:value必须设置初值，v-model变量值要与单选框的value值统一 -->
<p>
男:<input type="radio" name="sex" value="male" v-model="sex_val">
女:<input type="radio" name="sex" value="female" v-model="sex_val">
</p>
<!-- 3）单一复选框-->
<p>
<!-- v-model绑定的变量值与true-value|false-value统一 -->
<!-- true-value|false-value默认值为 true|false -->
是否同意条款:<input type="checkbox" name="agree" v-model="agree_val" true-value="同意" false-value="不同意">
</p>
<!-- 4)多复选框-->
<!-- v-model绑定的变量是存放多复选框value的数组(列表)-->
<p>
爱好:
爱好男的：<input type="checkbox" value="爱好男的" name="cless" v-model="more_val">
爱好女的：<input type="checkbox" value="爱好女的" name="cless" v-model="more_val">
不挑：<input type="checkbox" value="不挑" name="cless" v-model="more_val">
</p>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '',
sex_val: 'female',//默认value="female"的单选框被选中
agree_val: '不同意',
more_val: ['爱好男的', '爱好女的']
}
})
</script>
</html>
条件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pag1 {
background-color: red
}
.pag2 {
background-color: yellow
}
.pag3 {
background-color: blue
}
</style>
</head>
<body>
<div id="app">
<!-- v-if与v-show的变量值都是bool，控制着显隐-->
<!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏-->
<!-- 特殊属性key是vue在内存中建立缓存的标志，来优化渲染的效率-->
<p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
<p v-show="is_show" key="my_show">v-show的显示与隐藏</p>
<p>
<button @click="btn_click('pg1')">红</button>
<button @click="btn_click('pg2')">黄</button>
<button @click="btn_click('pg3')">蓝</button>
<div class="box pag1" v-if="pg == 'pg1'" key="pg1"></div>
<div class="box pag2" v-else-if="pg == 'pg2'" key="pg2"></div>
<div class="box pag3" v-else key="pg3"></div>
</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_if: true,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
</html>
循环指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环指令</title>
<style>
p {
padding-left: 30px;
}
</style>
</head>
<body>
<div id="app">
<p>{{ array[1] }}</p>
<p>{{ person['age'] }}</p>
<div>循环array</div>
<p v-for=" v in array">{{ v }}</p>
<div>带索引循环array</div>
<p v-for="(v,i) in array">{{ v }}索引是{{ i }}</p>
<div>循环person</div>
<p v-for="v in person">{{ v }}</p>
<div>带key循环person</div>
<p v-for="(v,k) in person">{{ v }}键是{{ k }}</p>
<div>带key带索引循环person</div>
<p v-for="(k,v,i) in person">{{ v }}键是{{ k }}索引是{{ i }}</p>
<div>循环persons</div>
<ul v-for="person in persons">
<li v-for="(v,k) in person">{{ k }}:{{ v }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
array: ['ios', 'android', 'winPone'],
person: {'name': 'Jobs', 'age': 88, 'gender': '男'},
persons: [
{'name': 'Jason', 'age': 58},
{'name': 'Jerry', 'age': 68},
{'name': 'Owen', 'age': 17},
]
}
})
</script>
</html>
前端array操作
<script>
array = [1, 2, 3, 4, 5];
console.log(array);
//从index开始往后操作length长度，替换args
// array.splice(index,length,args);
// array.splice(2, 3, 9, 9);//[1, 2, 9, 9]替换
// array.splice(2, 3);//[1, 2]删除
array.splice(2, 0, 8);//[1, 2, 8, 3, 4, 5]插入
console.log(array);
</script>
留言案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todoList案例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="txt">
<button @click="send_msg">留言</button>
<ul>
<li v-for="(msg,i) in msg_array" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
txt: '',
msg_array: [],
},
methods: {
send_msg: function () {
if (this.txt) {
this.msg_array.push(this.txt);
this.txt = ''
}
},
delete_msg: function (index) {
this.msg_array.splice(index, 1)
}
}
})
</script>
</html>