vue学习路(一)：常用指令v-text，v-html，v-bind，v-if，v-on

小白有话说：

作为前端小白，希望和大家一起分享学习的过程，每次学习到的新内容都会在这里分享，希望对大家有帮助，做的不好的地方的也希望大家提出，我会及时改正，如果代码有错误的话希望大家能够提醒我，嘻嘻嘻~~~

什么是vue

vue是一款渐进式JavaScript框架，渐进式是指由浅到深，由简单到复杂的使用vue框架。

vue的优点

体积更小：压缩后的vue.js的体积只有33k。
运行效率更高：vue.js基于虚拟DOM操作，大幅度提高了DOM的操作渲染效率。
双向数据绑定：开发者不需要再进行DOM操作，只需要操作数据包。
生态丰富，学习成本低。

vue的基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入vue.js文件 -->
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 2. 准备容器 -->
    <div id="app">
        <!-- 4. 在容器内渲染数据 -->
        <!-- {{变量}}：与data中的数据进行数据绑定 -->
        <h1>{{msg}}</h1>
    </div>

    <!-- 3. 初始化，通过vue.js提供的构造函数创建实例化对象-->
    <script>
        new Vue({
            // 标识控制区域/容器
            el:'#app',
            // 数据包，需要传递的数据
            data:{
                msg:'hello word'
            }
        })
    </script>
</body>
</html>

获取导入的vue.js文件

vue的常用语法指令

普通数据渲染

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。v-text可以简写为{{}}。

	<div id="app">
        <!-- 1. 普通数据的渲染 -->
        <h1 v-text="msg">{{msg}}</h1>
        <h1>{{msg}}</h1>
	</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 普通数据
                msg:'hello word',
            },
        })
    </script>

富文本数据渲染
v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

	<div id="app">
        <!-- 2. 富文本数据的渲染 -->
        <div v-html="richText"></div>
	</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 富文本数据
                richText:'<h2 style="color:red">富文本数据渲染</h2>',
            },
        })
    </script>

标签属性渲染
当需要动态决定标签属性的时候使用v-bind。

	<style>
		.box{
			width:100px;
			height:100px;
			border:2px solid red;
			}
		.box.active{
			background-color:orange;
			}
	</style>
	<div id="app">
        <!-- 3. 标签属性的渲染， 当div有active属性时，添加背景颜色-->
        用法1：通过三元运算符判断
        <div class="box" v-bind:class="active?'isActive':''"></div>
        用法2：直接通过对象{}绑定一个类
        <div class="box" v-bind:class="{active:isActive}"></div>
        用法3：通过数组[]的方式将固定属性和动态属性组合在一起
        <div v-bind:class="[box,{active:isActive}]"></div>
        <div v-bind:class="[box,active?'isActive':'']"></div>
	</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 标签属性的渲染
                isActive:true,
            },
        })
    </script>

条件渲染
v-if根据判断条件的值有条件的渲染元素。如果条件的值为真，则元素出现在页面中，反之则不会出现。v-else不需要判断条件，但是它的前一个兄弟元素必需是v-if或者v-else-if,它为v-if或v-else-if添加了else块。

	<style>
		.box{
			width:100px;
			height:100px;
			border:2px solid red;
			}
	</style>
	<div id="app">
        <!-- 4. 条件渲染，判断条件可以是变量，也可以是语句 -->
        <div class="box" v-if="5>3">v-if演示</div>
        <div class="box" v-if="isShow">v-if演示</div>
		<!-- 当v-if的结果为false的时候，显示v-else -->
        <div class="box" v-else>v-else演示</div>
	</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 条件渲染
                isShow:else,
            },
        })
    </script>

事件绑定
v-on:事件类型,用于事件绑定函数，v-click可以简写为 @click，但是不建议简写，因为asp.net mvc页面识别@ 不太好。

	<style>
		.box{
			width:100px;
			height:100px;
			border:2px solid red;
			}
		.box.active{
			background-color:orange;
			}
	</style>
	<div id="app">
        <!-- 4. 事件绑定-->
        <div class="box" v-bind:class="active?'isActive':''"></div>
        <div class="box" v-bind:class="{active:isActive}"></div>
        <div v-bind:class="[box,{active:isActive}]"></div>
        <div v-bind:class="[box,active?'isActive':'']"></div>
       
        <!-- 给按钮添加点击事件，控制背景颜色的显示-->
        <button v-on:click="handleBg">背景颜色</butoon>
	</div>
    <script>
        new Vue({
            el:'#app',
            data:{
                // 标签属性的渲染
                isActive:true,
                isShow:true,
            },
            methods:{
            	handleBg:function(){
            		this.isActive = !this.isActive;
            	},
            },
        })
    </script>

结语

以上是一些最基本和常用的vue指令，希望对大家有帮助。

原文链接：https://blog.csdn.net/qq_44860114/article/details/121405502