一.指令
什么是指令?
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model,代表双向绑定。
二、v-text和v-html
使用v-text和v-html指令来替代 {
{}}
说明:
v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染vue_day1/03_v-textandv-html.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app3">
v-text:<span v-text="msg"></span><br>
v-html:<span v-html="msg"></span><br>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app3", //el即element,要渲染的页面元素
data:{
msg:"<h2>hello vue!</h2>"
},
});
</script>
</body>
</html>
效果:
三、v-model
vue_day1/04_model.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app4">
<input type="checkbox" value="java" v-model="language">Java1<br>
<input type="checkbox" value="php" v-model="language">php1<br>
<input type="checkbox" value="python" v-model="language">python1<br>
<h2>
你选择了:{
{language.join(",")}}
</h2>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app4", //el即element,要渲染的页面元素
data:{
language:[]
},
});
</script>
</body>
</html>
效果:
多个 checkbox 对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型
radio对应的值是input的value值 input 和 textarea 默认对应的model是字符串
select 单选对应字符串,多选对应也是数组
四、v-on(可用@代替)
v-on指令用于给页面元素绑定事件。
语法:v-on:事件名=“js片段或函数名”(就是后面可接表达式或者函数)
简写语法(常用):
@事件名=“js片段或函数名”
例如 v-on:click=‘add’ 可以简写为 @click=‘add’
4.1 事件修饰符
代码演示上述: