持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
尝试vue
<div id="app">{{username}}</div>
// 创建vue实例对象
const vm = new Vue({
// el属性是固定的写法 表示当前的vms实例要控制当前页面的那个实例 接受的是那个选择器
el: '#app',
// data对象就是要渲染的页面上的数据
data: {
username: 'zhangsan'
}
})
vue指令
内部渲染指令
- v-text 覆盖标签内部原本的内容
- {{}}
- v-html 可以把带有标签的字符串，渲染成真正的html内容
用法示例
把username渲染进p
<div id="app">
<p v-text="username"></p>
</div>
const vm = new Vue({
el: '#app',
data: {
username: 'zhangsan'
}
})
属性绑定值
插值表达式 只能用在内容节点 不能用在属性节点
- v-bind
在所要添加的属性前加v-bind: 能将vue数据渲染进去 v-bind 可以简写为 :
用法示例
把tips渲染进input的 placeholder 属性中
<div id="app">
<input type="text" v-bind:placeholder="tips">
</div>
const vm = new Vue({
el: '#app',
data: {
tips: '请输入用户名',
tips3 : '123',
id : '3',
}
})
- 在使用v-band 属性绑定期间 字符串需要拼接则 需要加引号
<input type="text" :placeholder="'tips'+id ">
事件绑定
v-on: 事件绑定 可以简写为@
示例
<button v-on:click="add"> +1</button>
// 创建vue实例对象
const vm = new Vue({
// el属性是固定的写法 表示当前的vms实例要控制当前页面的那个实例 接受的是那个选择器
el: '#app',
// data对象就是要渲染的页面上的数据
data: {
tips: '请输入用户名',
},
//定义事件处理函数
methods: {
add() {
console.log('ok')
}
},
})
事件修饰符
经常用的stop 为阻止冒泡 冒泡 就是 当有2个div时点击内部的div 外部的也会执行 组织冒泡就是阻止改操作 ![[事件修饰符.png]]
冒泡
发生在子元素身上的 事件 ，会 冒泡 至父元素身上
- 如何阻止
v-on:click.stop
scoped的使用
会改变其他页面的h3样式的颜色
h3{
color:red;
}
<style lang="less" scoped>
h1{color: red;}
</style>>
deep 修改子组件的样式
使用场景 ： 在父组件中直接改变css样式 在标签前加/deep/
<style lang="less" scoped>
/deep/ h1{
color: red;
}
</style>>
