vue_baselearning
Vue基本入门知识点整理
Vue基本架构:
<div id="app"> |
const app = new Vue({ |
el是绑定选中的元素的作用域,不可绑定在Html和body标签,里面可以绑定其他DOM元素,例如id,class,标签等,对应着#id,.class,标签等
Vue在body里面定义的元素数据,用到的数据定义在data中,data中可以写复杂类型的数据,渲染复杂类型的数据时,遵守js的语法即可
Vue函数:
v-text
<div id="app">
<h1 v-text="context_name+'lalala'">哈哈哈</h1>//输出“他在lalala”
<h1 v-text="context_name">呵呵呵</h1>//输出“他在”
<h1>{{message}}咳咳咳</h1>//输出“我在咳咳咳”
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"我在",
contex_name:"他在"
}
})
</script>
v-text指令的作用是:设置标签的内容(textContent)
默认的写法会替换全部内容,使用差值表达式可以替换指定内容
内部支持写表达式
v-html
<div id="app">
<h1 v-html="baidu">哈哈哈</h1>//输出一个普通文本字符
<h1 v-html="baiduurl">哈哈哈</h1>//输出一个超链接字符
</div>
<script>
const app = new Vue({
el:"#app",
data:{
baidu:"百度",
baiduurl:"<a herf="https://www.baidu.com">百度</a>"
}
})
</script>
v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
而对于v-text,v-text指令无论内容是什么,都只会解析成文本
解析文本使用v-text,需要解析html结构使用v-html
v-on基础
<div id="app">
<input type="button" value="鼠标单击" v-on:click="do" />
<input type="button" value="鼠标移入" v-on:click="do" />
<input type="button" value="鼠标双击" v-on:click="do" />
<input type="button" value="鼠标双击简写" @dblclick="do" />
<h2 @click="changeword">{{name}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
name:"小白"
},
methods:{
do: function(){
alert("你触发了");
}
changeword: function(){
this.name += 小白
}
}
})
</script>
v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
v-show基础
<div id="app">
<input type="button" value="显示/隐藏文字" v-on:click="show" />
<h2 v-show="isShow">你看到我吗</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
show: function(){
this.isShow = !this.isShow;
}
}
})
</script>
v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的disalay,实现显示隐藏
指令后面的内容,最终都会解析成布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
v-if
<div id="app">
<input type="button" value="显示/隐藏文字" v-on:click="show" />
<h2 v-if="isShow">你看到我吗</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
show: function(){
this.isShow = !this.isShow;
}
}
})
</script>
v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树种,为false,从dom树中移除
v-bind
<style>
.abc{
border: 1px solid red;
}
</style>
<div id="app">
<input type="button" @onclick="show">
<img v-bind:src="imgSrc">
<img v-bind:title="imgtitle">
<img v-bind:class="ifShowClass:'classname':''">//三目运算符方式
<img v-bind:class="{classname:ifShowClass}">//对象方式
</div>
<script>
const app = new Vue({
el:"#app",
data:{
imgSrc:"./图片地址",
imgtitle:"图片名称",
ifShowClass:false,
classname:"abc"
},
methods:{
show:function(){
this.ifShowClass =!this.ifShowClass;
}
}
})
</script>
v-bind指令的作用是:为元素绑定属性
完整的写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删ckass建议使用对象的方式
v-for
<div id="app">
<ul>
<li v-for="item in arr">第{{index+1}}个是{{item}}</li>//跟for in里面的索引不同
<li v-for="(item,index) in arr1">{{index}}今年{{item.name}}岁了</li>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
arr:["a","b","c","d","e"],//数组
arr1:[{
"小明":13,
"小绿":15
}]//对象数组
},
methods:{
}
})
</script>
v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是(item,index) in 数据
item和index可以结合其他指令一起使用
v-on补充
<div id="app">
<input type="button" @click="lalala(1,2)" />
<input type="text" @keyup:enter="test" />
</div>
<script>
const app = new Vue({
el:"#app",
data:{
},
methods:{
lalala: function(p1,p2){
console.log(p1);
console.log(p2);
}
test: function(){
alert("test");
}
}
})
</script>
事件绑定的方法写成函数调用的形式,可以传入自定义参数
定义方法是需定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有很多种,具体更多详情请看文档 Https://cn.vuejs.org/v2/api/@v-on
v-model
<div id="app">
<input type="text" v-model="message" />
<h2>{{message}}</h2>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"nihaoa"
},
methods:{
}
})
</script>
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据⬅️➡️表单元素的值
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Anthony's Blog!
评论