目录
此章开始讲一下vue一些常用的主要命令,并不是每个vue命令都讲到,主要是方便初学者理解vue而已,起到指引作用。
一、vue数据相关命令
1.1 Mustache文件插值
1.1.1 说明
{{ }} 这种写法叫插件表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
<span>
Message: {{ msg }}
</span>
Mustache 标签将会被替代为对应数据对象上 msg
property 的值。无论何时,绑定的数据对象上 msg
property 发生了改变,插值处的内容都会更新。
1.1.2 例子
<div id="root">
<h2>hello {{msg}}</h2>
<p>{{t1}}</p>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "vue",
t1: '这是我第一个vue'
}
})
</script>
运行结果:
1.2 v-text 命令
1.2.1 说明
我们也可以使用 v-text命令
- 预期:
string
- 详细:
更新元素的 textContent
。如果要更新部分的 textContent
,需要使用 {{ Mustache }}
插值。
- 示例:
- <span v-text="msg"></span>
- <!-- 和下面的一样 -->
<span>{{msg}}
</span>
- 参考:数据绑定语法 - 插值
1.2.2 例子
<body>
<div id="root">
<h2 v-text="msg">这是标题</h2>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "<u>vue</u>"
}
})
</script>
</body>
运行效果:
PS: v-text="msg" 接的是表达式,其中"msg"表示data中的msg,如果要接字符串,加单引号,即可
使用vue系统的东西,就可以调用它系统内的数据了。就像springBoot,你把对象放在托管容器中,这样你就可以使用它的注解。
理解:v-text使用的是vue系统自己的命令,默认会去vue实例的data参数对象中查找相关的成员。如果找不到会不显示,空白,使用vue调试工具会报警告
1.3 使用v-html命令
1.3.1 说明
数据显示也可以使用Vue的v-html命令
- 预期:
string
- 详细:
更新元素的 innerHTML
。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html
组合模板,可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html
,永不用在用户提交的内容上。
在单文件组件里,scoped
的样式不会应用在 v-html
内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html
的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局 <style>
元素手动设置类似 BEM 的作用域策略。
1.3.2 例子
把上面的v-text换面v-html
<div id="root">
<h2 v-html="msg">这是标题</h2>
</div>
运行结果如下:发现字符串中里面的html标签被解析了!
二、事件
2.1 模板v-on指令
使用事件我们可以使用模板指令v-on
- 缩写:@
- 预期:Function | Inline Statement | Object
- 参数:event
- 修饰符:
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
- 用法:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event property:v-on:click="handle('ok', $event)"。
从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
2.2 例子
<body>
<div id="root">
<p v-on:click="t1">hello {{msg}}</p>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "vue",
},
methods: {
t1: function (){alert('这是我第一个vue')}
}
})
</script>
</body>
运行效果: 点一下文字,则会弹出一个对话框。
2.3 例2
上面的例1如果,我不需要弹出东西,而是修改内容呢,很简单使用this命令
<body>
<div id="root">
<p v-on:click="t1">hello {{msg}}</p>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "vue",
},
methods: {
//this.msg完整写法this.$data.msg
//具体可以看 https://cn.vuejs.org/v2/api/#vm-data
t1: function (){ this.msg="这是我第一个vue"}
}
})
</script>
</body>
运行结果
三、自定义事件(学完后回看)
3.1 说明
关于自定义事件,可以看vue官网的自定义事件,也可以看菜鸟教程的自定义事件
父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
可以在子组件上创建自定义事件,格式
<子组件标签 @<自定义事件名=”<调用方法名>”>>
3.2 例子
比如,我创建一个子组件是添加我写的文档,添加完成之后,点击列表中的字段自动添加“(hualinux)”,表示是hualinux写的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myvue</title>
<script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="docName"/>
<button v-on:click="myClick">提交</button>
</div>
<ul>
<!-- @add-author 为我自定义的事件,点击自动添加 -->
<todo-item v-for="(item,index) of list" :key="index"
:content="item" :index="index" @add-author="addHualinux" style="list-style: none"></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['content','index'],
template: '<li @click="liClick" >{{content}}</li>',
methods: {
liClick: function () {
// 调用事件,并传给参数给 add-author对应的方法,这里是addHualinux
this.$emit('add-author', this.index)
}
}
})
new Vue({
el: "#root",
data: {
docName: '',
list: []
},
methods: {
myClick: function (){
this.list.push(this.docName)
this.docName=''
},
addHualinux: function (index){
const newName= this.list[index]+"(hualinux)"
this.list.splice(index,1, newName);
}
}
})
</script>
</body>
</html>
运行效果:
我在上面输入“ansible”并点“提交”,尝试点一个下面的ansible是不会自动添加 (hualinux)