文章目录
- 前言
- 一、Vue简介
- 二、Vue简单实例
- 三、Vue-el挂载点
- 1.el理解
- 2.el使用
- 四、Vue-data
- 1.data理解
- 五、v-text(文本)
- 六、v-html(标签)
- 七、v-bind(动态设置元素属性)
- 八、v-on(事件)
- 九、v-show(元素是否显示)
- 十、v-if... v-else-if...v-else(条件渲染)
- 十一、v-for(列表渲染)
- 十二、v-model(表单输入绑定)
- 十三、v-once(最终数据)
- 今日推荐
前言
前端小白正在学习Vue,这也是每天的一个学习记录,有兴趣的同学可以随便看看
一、Vue简介
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(官网复制)
二、Vue简单实例
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
</body>
</html>
执行:
三、Vue-el挂载点
1.el理解
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
刚开始接触Vue的小伙伴,可能会有疑问el代表什么,其实el是Element(元素)的缩写,我们可以把它比喻成css的选择器来进行使用。
2.el使用
这里推荐大家挂载id选择器,大家都知道id代表唯一的意思,这样挂载的元素能避免冲突。
四、Vue-data
1.data理解
大家在这里可以把data理解成一个函数,这个地方我也还在学习当中(欢迎大佬补充对于data的理解)。
五、v-text(文本)
在实例的时候,使用的是{{message}},这里呢,也可以直接将v-text定义在标签中,标签内部就会自动添加我们定义在v-text=“”中值的文本。
<div id="app">
<h1 v-text="message"></h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
执行:
六、v-html(标签)
这里v-html可以将内容里的标签进行插入
<div id="app">
<div v-html="message">
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "<h1>Hello Vue</h1>"
}
})
</script>
执行:
七、v-bind(动态设置元素属性)
在我们使用标签的时候,例如<img src=" " class=" "/>
我们可以使用v-bind来动态设置元素的src,class的属性值,
<div id="app">
<img v-bind:src="demo" alt="">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
demo: "https://www.baidu.com/img/flexible/logo/pc/result.png"
},
})
</script>
执行:
这里呢,我们还可以将v-bind:缩写成:
<div id="app">
<img :src="demo" alt="">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
demo: "https://www.baidu.com/img/flexible/logo/pc/result.png"
},
})
</script>
也是可以执行的:
八、v-on(事件)
在vue中我们需要绑定事件就可以使用v-on来进行事件绑定。
<div id="app">
<button v-on:click="print">打印</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
print: function() {
alert("Hello Vue")
}
}
})
</script>
执行:
这里呢,我们还可以将v-on:缩写成@
<div id="app">
<button @click="print">打印</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
print: function() {
alert("Hello Vue")
}
}
})
</script>
也是可以执行的:
九、v-show(元素是否显示)
在vue中我们要控制元素是否显示,可以使用v-show,其中的值为true就显示,为flase就不显示
<div id="app">
<div style="width: 300px;height: 300px;background-color: blue;">
<div v-show="isShow" style="width: 100px;height: 100px;background-color: red;"></div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: false
},
})
</script>
isShow: true时:
isShow:false 时:
十、v-if… v-else-if…v-else(条件渲染)
条件渲染中的值是否为true决定是否显示该元素
<div id="app">
<div style="width: 300px;height: 300px;background-color: blue;">
<div v-if="isShow == 1" style="width: 100px;height: 100px;background-color: red;"></div>
<div v-else-if="isShow == 2" style="width: 100px;height: 100px;background-color: green;"></div>
<div v-else="isShow == 3" style="width: 100px;height: 100px;background-color: purple;"></div>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isShow: 1
},
})
</script>
isShow == 1时:
isShow == 2时:
isShow == 3时:
十一、v-for(列表渲染)
v-for=“item,index in items” items代表需要循环的元素,item循环每一项的变量,index表示循环每一项的下标
<div id="app">
<ul>
<li v-for="item,index in items">下标:{{index}}-名字:{{item.name}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [{
name: "小明"
}, {
name: "小红"
}, {
name: "小李"
}]
},
})
</script>
执行:
十二、v-model(表单输入绑定)
v-model 指令在表单 input、textarea 及 select元素上创建双向数据绑定
<div id="app">
<input type="text" v-model:value="message"> {{message}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "123"
},
})
</script>
执行:
十三、v-once(最终数据)
v-model 指令在表单 input、textarea 及 select元素上创建双向数据绑定
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello world"
}
})
</script>
数据不会再改变: