VUE 基础语法 插值表达式{{}} 指令v-... 样式的设置
1-阶段学习目标
- vue框架
- react框架
2-vue框架介绍
特点
- 入门门槛比较低(学习成本比较低)
- 开发效率高(有非常多的配套设施: UI库)
- 数据驱动视图更新(不建议操作DOM)
- vue开发的项目性能会比原生方式开发的性能高
3-下载以及安装
-
手动下载, 通过script标签引入
-
直接通过script标签引入在线CDN地址
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
通过npm在线下载 通过script标签引入
npm i vue -S
<script src="node_modules/vue/dist/vue.js"></script>
4-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>
<!-- 第一步: 引入vue核心包 -->
<script src="libs/vue.js"></script>
</head>
<body>
<!-- 第二步: 模板 -->
<div id="app">
<h1>{{msg}}</h1>
<h2>{{msg2}}</h2>
</div>
</body>
<script>
// 第三步: 创建vue实例对象
const vm=new Vue({
// 指定模板的选择器
el:'#app',
// 存储数据
data:{
msg:'hello vue',
msg2:'你好, vue'
}
});
</script>
</html>
5-插值表达式
- 书写位置: 仅限于标签之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步: 引入vue核心包 -->
<script src="libs/vue.js"></script>
</head>
<body>
<!-- 第二步: 模板 -->
<div id="app">
<h1>{{msg}}</h1>
<!-- 调用系统方法 -->
<h1>{{msg.toUpperCase().substr(0,5)}}</h1>
<!-- 能否调用自定义方法 -->
<h1>{{mySubstr(msg,0,2)}}</h1>
<hr>
<!-- 字符串拼接 -->
<h1>{{msg+'~~~'}}</h1>
<h2>{{count}}</h2>
<!-- 数学运算 -->
<h2>{{count+200}}</h2>
<!-- 逻辑处理 -->
<h2>{{score>=60?'及格':'不及格'}}</h2>
<hr>
<h2>{{foo}}</h2>
<h2>{{foo1}}</h2>
<h2>{{foo2}}</h2>
</div>
</body>
<script>
// 第三步: 创建vue实例对象
const vm = new Vue({
// 指定模板的选择器
el: '#app',
// 存储数据
data: {
msg: 'hello vue',
count: 100,
score: 50,
foo: true,
foo1: undefined,
foo2: null
},
// 书写方法: 事件处理函数/
methods:{
mySubstr(str,start=0,len=1){
return str.substr(start,len);
}
}
});
</script>
</html>
6-指令
- 指令是一种特殊的语法
- 指令的语法: 当做自定义标签使用即可
6.1-v-text
-
作用: 指定标签的内容
-
特点: 如果变量中包含标签, 会原样输出
-
语法:
<h1>{{msg}}</h1> <h1 v-text="msg"></h1>
6.2-v-html
-
作用: 渲染富文本, 可以解析变量中的标签
-
特点: 如果变量中包含标签, 会解析标签
-
语法
<h1 v-html="content"></h1>
6.3-v-bind
-
作用: 设置标签属性值
-
简写: 省略
v-bind
, 只保留:
-
语法
<img v-bind:src="url" /> <!--简写--> <img :src="url" />
6.4-v-show
-
作用: 控制元素的显示状态(隐藏, 显示)
-
特点: 通过css的方式实现隐藏元素(display:none)
<img src="./imgs/3.jpg" v-show="isShow"/>
6.5-v-if
-
作用: 控制元素的显示或隐藏状态
-
特点: 根据条件成立与否, 创建或者销毁元素实现切换显示状态
-
注意:
v-else
,v-else-if
指令不能单独使用, 必须配合v-if
指令使用 -
语法
<h1 v-if="score<60">不及格</h1> <h1 v-else-if="60<=score&&score<=70">及格</h1> <h1 v-else-if="70<score&&score<=80">良好</h1> <h1 v-else-if="score>80&&score<=100">优秀</h1> <h1 v-else>成绩不合法</h1>
6.6-v-once
-
作用: 只对指定所在标签执行一次模板编译, 当标签引用的变量发生更新时, 不会对其进行二次编译
-
应用场景: 主要用于性能优化(如果变量的更新, 不希望触发模板的二次编译, 可以使用v-once指令)
-
语法:
<h1 v-once>{{msg}}</h1>
6.7-v-on
-
作用: 注册事件
-
语法
<button v-on:事件名称="事件处理函数">按钮</button>
-
注意:
- 在methods方法中获取data中的数据, 直接通过
this关键字+数据属性名
即可
- 在methods方法中获取data中的数据, 直接通过
-
简写: 使用
@
代替v-on:
<button @事件名称="事件处理函数">按钮</button>
6.8-v-for
-
作用: 对数组, 对象进行循环遍历输出
-
语法
<div id="app"> <!-- 循环遍历数组 --> <!-- value表示数组的元素, index表示数组的索引 --> <h1 v-for="(value,index) in list">{{index}}----{{value}}</h1> <hr> <!-- 遍历对象 --> <!-- item表示对象属性值, key表示对象属性名 --> <h1 v-for="(item,key,index) in user">{{index}}----{{key}}----{{item}}</h1> <hr> <!-- 遍历数值 --> <ul> <li v-for="(str,index) in 'hello'">{{index}}---{{str}}</li> </ul> <!-- 遍历字符串 --> <ul> <li v-for="(number,index) in 10">{{index}}----{{number}}</li> </ul> </div> <script> // 第三步: 创建vue实例对象 const vm = new Vue({ // 指定模板的选择器 el: '#app', // 存储数据 data: { msg: 'hello vue', list:['jack','robin','pony'], user:{ name:'jack', gender:'男', age:50, address:'中国' } } }); </script>
-
key属性: 一般在进行v-for循环遍历的时候, 需要给循环遍历的标签动态添加key属性, 并且要保证key属性的唯一性
- 作用: 在视图和数据层建立一一对应关系, 方便后期进行布局更新
6.9-v-model
-
作用: 双向绑定, 浏览器输入的东西, 实时反馈到某个地方
-
语法
<input type="text" v-model="变量">
7-样式的设置
7.1-动态设置style
-
静态style
<div style="width: 200px;height: 200px;background-color: green;"></div>
-
v-bind动态绑定style
<div v-bind:style="{width:'200px',height:'200px',backgroundColor:'red'}"></div>
<div v-bind:style="divStyle"></div> <script> const vm = new Vue({ el: '#root', data: { // 样式对象 divStyle: { width: '200px', height: '200px', backgroundColor: 'red', boxShadow:'0 0 2px 2px #333' } } } </script>
-
数组写法
<div id="root"> <!-- 动态设置两个样式对象 --> <div v-bind:style="[hashSize?sizeStyle:'',hashBg?bgStyle:'']">动态设置style</div> <hr> <button @click="addSize">添加尺寸</button> <button @click="addBg">添加背景</button> </div> <script> const vm = new Vue({ el: '#root', data: { hashSize:false, hashBg:false, // 样式对象1 sizeStyle: { width: '200px', height: '200px', }, // 样式对象2 bgStyle:{ backgroundColor: 'red', boxShadow:'0 0 2px 2px #333' } }, methods: { addSize(){ this.hashSize=!this.hashSize; }, addBg(){ this.hashBg=!this.hashBg; } } }); </script>
7.2-动态设置class
-
字符串写法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="className">动态设置class</div> </div> <script> new Vue({ el:'#app', data{ className:'size bg font' } }) </script>
-
数组写法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="[hashSize?'size':'',hashBg?'bg':'',hashFont?'font':'']">动态设置class</div> <hr> <button @click="toggleSize">添加尺寸</button> <button @click="toggleBg">添加背景</button> <button @click="toggleFont">添加字体</button> </div> <script> new Vue({ el:'#app', data{ hashSize:false, // 是否添加.size类名 hashBg:false, // 是否添加.bg类名 hashFont:false // 是否添加.font类名 }, methods: { toggleSize(){ this.hashSize=!this.hashSize; }, toggleBg(){ this.hashBg=!this.hashBg; }, toggleFont(){ this.hashFont=!this.hashFont; } } }) </script>
-
对象写法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="{size:hashSize,bg:hashBg,font:hashFont}">动态设置class</div> <hr> <button @click="toggleSize">添加尺寸</button> <button @click="toggleBg">添加背景</button> <button @click="toggleFont">添加字体</button> </div> <script> new Vue({ el:'#app', data{ hashSize:false, // 是否添加.size类名 hashBg:false, //是否添加.bg类名 hashFont:false //是否添加.font类名 }, methods: { toggleSize(){ this.hashSize=!this.hashSize; }, toggleBg(){ this.hashBg=!this.hashBg; }, toggleFont(){ this.hashFont=!this.hashFont; } } }) </script>