vue第一天打卡
指令
v-text | 填充内容 |
v-bind | 绑定属性 |
v-model | 双向数据绑定 |
v-html | 填充html标签 |
v-once | 限制编译 |
el和data的两种写法
第一种 el:'#app'
第二种
// 计时器 第二种写法 把id选择器放在外面
setTimeout(() => {
vm.$mount('#root')
}, 1000)
// el的两种写法用那种都可以
data的两种用法
第一种
data:{
nanme:'zs'
}
// data的函数式写法 ------data
data: function() {
console.log(this)
// this是vue的实列对象
// data函数不能写成箭头函数
v-bind 绑定属性的使用
<div id="app">
<!-- 绑定属性 a href -->
<a v-bind:href="url">百度{{name}}</span></a>
<br>
<button v-on:click="handel">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
name: '百度',
src: '../img/ch1.jpg',
data: {
url: 'http://www.baidu.com'
},
methods: {
handel: function() {
this.name = 'vue'
this.url = 'http://itcast.cn'
},
}
})
</script>
v-text 使用
<div id="app">
<p v-text="masg"></p>
</div>
<script>
// 使用vue必须实列化一个vue
var vm = new Vue({
el: '#app',
data: {
masg: 'v-text数据填充'
}
})
</script>
v-html
<div id="app">
<p v-text="masg"></p>
</div>
<script>
// 使用vue必须实列化一个vue 使用的时候慎用 第三方的访问不建议使用 会被攻击
var vm = new Vue({
el: '#app',
data: {
masg: new Date()
}
})
</script>
v-model
<div id="app">
<form action="">
<h1 v-text="msg"></h1>
<!-- 用在表单输入 改变输入的内容会影响 数据的变化 -->
<input type="text" v-model="msg">
</form>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '输入'
}
})
v-once
<p v-once>{{masg}}</p>
v-pre
<!-- 显示原来的内容 显示 {{masg}} 跳过编译< -->
<p v-pre>{{masg}}</p>
v-for循环
<div id="app">
<div>
<ul>
<!-- item 自己定义的 fre是遍历的数组 index也是自己定义的 索引
key为了提高效果 如果有id v-bind:key="id"
v-bind:key="index" 设置成索引也可以 索引也是唯一的
-->
<li v-bind:key="index" v-for="(item ,index) in fre">{{item +'---'+index}}</li>
<li v-for="it in my">
<span>{{it.ename}}</span>
<span>--------</span>
<span>{{it.cname}}</span>
<!-- 数据可以复杂 使用. 去拿值 -->
</li>
</ul>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
fre: ['aa', 'ccc', 'bbb', 'ee'],
my: [{
ename: 'aa',
cname: '1'
}, {
ename: 'ccc',
cname: '2'
}, {
ename: 'ee',
cname: '3'
}]
},
methods: {
},
})
</script>
按键修饰符
<!-- 按delete键清空 v-on:keyup.delete -->
用户名<input type="text" v-model="name" v-on:keyup.delete="cl">
按delete可以删除输入的内容
事件修饰符
<!-- .prevent 阻止默认行为 事件修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
比如a标签在没有href的情况下点击会刷新 加上.prevent会阻止a标签的默认行为