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关键字+数据属性名即可

简写: 使用@代替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=" 200px;height: 200px;background-color: green;"></div>

v-bind动态绑定style

<div v-bind:style="{'200px',height:'200px',backgroundColor:'red'}"></div>

<div v-bind:style="divStyle"></div>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            // 样式对象
            divStyle: {
                 '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: {
                 '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{
      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{
      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{
      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>

VUE 基础语法 插值表达式{{}} 指令v-... 样式的设置

1-阶段学习目标

2-vue框架介绍

特点

3-下载以及安装

4-vue基础语法

5-插值表达式

6-指令

6.1-v-text

6.2-v-html

6.3-v-bind

6.4-v-show

6.5-v-if

6.6-v-once

6.7-v-on

6.8-v-for

6.9-v-model

7-样式的设置

7.1-动态设置style

7.2-动态设置class

VUE 基础语法插值表达式{{}} 指令v-... 样式的设置