“这是sylu计算机协会第一次技术征文活动”
尝试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')
}
},
})
事件修饰符
- 在我们使用V-on的时候会出现冒泡的问题（即点击内部盒子，外部的盒子也会触发事件） 经常用的stop 为阻止冒泡 即@click.stop
按键修饰符
@keyup.特定的键='id'来控制
e.target 为元素自带的属性 当没有传参时能调用传参时还需要增加$event参数
<div id="app">
<input type="text" @keyup.esc="clearinput" @keyup.enter="comentajax">
</div>
// 创建vue实例对象
const vm = new Vue({
// el属性是固定的写法 表示当前的vms实例要控制当前页面的那个实例 接受的是那个选择器
el: '#app',
// data对象就是要渲染的页面上的数据
data: {
count: 0,
},
//定义事件处理函数
methods: {
clearinput(e) {
console.log(e);
e.target.value = ''
this.val = ''
},
comentajax(e) {
console.log('已经确定输入' + e.target.value)
},
}
}, )
双向绑定指令
- v-model
更改第一个文本框中的内容会替换到文本源内 第二个仅仅获取文本源中的内容
<div id="app">
<input type="text" v-model="username">
<input type="text" :value="username">
</div>
const vm = new Vue({
el: '#app',
data: {
username: 'wonendie',
},
methods: {
}
}, )
v-model 指令修饰符
- 通过V-model双向绑定 可以使用户在页面输入的东西反馈到文件里
条件渲染指令
- v-show 动态添加或移除display:none样式，来实现元素的显示和隐藏
- v-if 直接移除或者创建元素
