您的位置：首页 > Web前端 > Vue.js

vue基本使用

2020-08-17 20:53 155 查看

1.引入vue

2.实例化vue

3.设置挂载点，并使用初始数据

注意事项

挂载点要使用id选择器
挂载点不能是ntml或者body标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安装vue</title>
<!-- 1 引入vue  我用的是本地文件 -->
<script src="./node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
</head>
<body>
<!-- 3 设置挂载点 -->
<div id="box">
<!-- 在作用域下使用变量 -->
{{a}}
</div>
<script>
// 2 实例化vue
new Vue({
el:"#box",//4 连接挂载点
data:{//设置连接区域需要用到的变量
// eg：设置变量a=10
a:10
},
methods:{//设置连接区域要用的方法
show(){
console.log(1)
}
}
})
</script>
</body>
</html>

内容展示

文本插值语法{{ }}：可以用来展示单行代码

<div id="box">
<!-- 三元判断语句 -->
{{age>=18?"已成年":"未成年"}}
</div>
<script>
new Vue({
el:"#box",
data:{
age:19
},
})
</script>

v-text：可以设置文本内容

<div id="box">
<!-- p标签里展示Sname -->
<p v-text="Sname"></p>
</div>
<script>
new Vue({
el:"#box",
data:{
Sname:"大家好 ，我是小白"
},
})
</script>

v-html：可以设置有标签的内容

<div id="box">
<!-- p标签里展示con -->
<p v-html="con"></p>
</div>
<script>
new Vue({
el:"#box",
data:{
con:"<h2>大家好，我是小白</h2>"
},
})
</script>

条件判断

v-if ----- v-else-if----v-else

<div id="box">
<!-- 分数大于90优秀 大于60及格 小于不及格 -->
<p v-if="grade>=90">优秀</p>
<p v-else-if="grade>=60">及格</p>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el:"#box",
data:{
grade:90
},
})
</script>

v-show 判断是否展示

语法

<p v-show="布尔值或条件语句，只要最后结果为布尔型就能决定是否显示该内容"></p>

事件绑定 v-on：事件名

也可以简化写法@事件名=

<p v-on:事件名="要执行的函数 或代码"></p>

<div id="box">
<p @click="click"></p>
</div>
<script>
new Vue({
el:"#box",
data:{
grade:90
},
methods:{//声明函数
click(){
console.log("!")
}
}
})
</script>

属性绑定 v-bind

可以简写为：要绑定的属性

<div id="box">
<!-- 两种绑定办法都可以 -->
<!-- <img v-bind:src="imgSrc" alt=""> -->
<img :src="imgSrc" alt="">
<button v-on:click="changeImg">换图</button>
</div>
<script>
new Vue({
el:"#box",
data:{
imgSrc:"https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598272087&t=32264db2871c5b3ea043c017d6fd3686"
},
methods:{//声明函数
changeImg(){
this.imgSrc="https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1598272087&t=0c9e2da02bedf6b40fc60d3989898a04"
}
}
})
</script>

动态绑定样式：有三种绑定方法

<div id="box">
<!-- 变量绑定 -->
<div :style="{background:bgColor}"></div>
<!-- 对象绑定 -->
<div :style="obj"></div>
<!-- 数组绑定 -->
<div :style="[obj,obj1]"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
bgColor: "pink",
obj: {
background: "pink"
},
obj1: {
fontSize: "20px"
}
},
})
</script>

动态更改class属性三种方法

<div id="box">
<!-- 变量绑定 -->
<p :class="nameClass"></p>
<!-- 对象绑定 如果：后运行结果是true 就加上这个class -->
<p :class="{'on':true}">dsad </p>
<!-- 数组绑定 同时设置多个class名 -->
<p :class="['on','active']"></p>
</div>
<script>
new Vue({
el: "#box",
data:{
nameClass:"on"
}
})
</script>

列表渲染 v-for

<标签名 v-for=“item of 数据源”></标签名>
在vue里of 和 in 作用是一样的
遍历数组的话第一个变量是每条数据，第二个是对应的下标
遍历对象第一个变量是各个属性值，第二个是属性名，第三个是下标（在这里下标值每个键值对看做数组的一条数据）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航