vue入门 vue基础之简单使用2--指令集

最新推荐文章于 2024-03-18 18:44:26 发布

Ca_va

最新推荐文章于 2024-03-18 18:44:26 发布

阅读量272

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Ca_va/article/details/109282676

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

指令集：指令集是指指令的集合，而指令:凡是v-开头的都是vue指令
详细代码看最后

v-text v-html

1.初始化vue

这里使用setTimeout函数设置延迟1s后生成Vue对象(有用)

    <script>
        setTimeout(() => {
            var vm= new Vue({
            el:"#app",
            data:{
                msg:"<b>hello</b>",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                },
                isShow:false
            },
            mounted(){
                console.log(this.msg);
            },
            methods:{

            }
        });
        }, 1000);

2.在div为#app的代码html中，使用v-text，v-html

    <div id="app">
            <p v-text="msg"></p>
        <p v-html="msg"></p>
        </div>

v-html,v-text的作用
1.插入式与整体式的数据渲染
例如：

<p>{{msg}} niubi</p> 
<p v-text="msg">niubi</p>

第一个会显示msg的数据+niubi，属于插入式的数据渲染
第二个只会显示msg的数据属于整体式的数据渲染(v-html相同)
2.延迟加载
如果设置了延迟加载，v-text，v-html在延迟时间未到时，不会展示。插值表达式则显示{{msg}}字样的数据

        <p v-text="msg">sdfs</p>
        <p v-html="msg">sdfs</p>
        <p>{{msg}}</p>

第一，第二个是没有数据的。甚至在生成代码的时候，如果vue对象未生成，该行数据就是空的
3.v-text与v-html的区别
这两个的区别可以与js中的innetText和innerHtml相比较:
如果指定的数据中有html标签，会将其渲染出来

注意：如无必要，尽量不使用或者禁止使用v-html，避免xss跨站脚本攻击。

v-if v-show

同样生成vue对象，与上面一致，省略
使用：

        <p v-if="isShow">{{msg}}</p>
        <p v-else> v-else --{{count}}</p>
        <p v-show="isShow">{{msg}}</p>

v-if的作用就是如果条件为真，展示数据
v-show的作用与v-if相似
比较:
v-if：有更大开销，适用于不频繁切换显示状态，并且初始渲染时不必渲染如果结果为false，则不显示任何数据。可以搭配v-else
v-show：开销较小，适用于频繁切换显示状态。如果结果为false，则会添加一个style为none的样式

click

1.初始化vue
此时在methods中添加几个函数
PS：这里除了el和data，其他名称都是复数-_-

var vm=new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                },
                isShow:false
            },
            mounted(){

            },
            methods:{
                clickMe(){
                    this.msg="惦记我也没有用"
                },
                clickThis(param){
                    this.msg=param
                },
                clickOnce(){
                    alert("触发了我")
                },
                clickPrevent(){
                    alert("我也被触发了");
                }
            }
        });

2.使用
1.基本写法是:v-on:click。@click是它的简写
例如:

        <button v-on:click="clickMe">惦记我</button>
        <button v-on:click="clickThis(`这下有用`)">惦记我1</button>
        <button @click="clickThis(`这下有用`)">惦记我2</button>

如果函数无参，此处clickMe函数加不加()都无所谓

2.@click.stop,@click.prevent@click.once
以上三个是click中最常用的
stop :防止冒泡事件。其实就是在当前div中，除该事件外，外部事件不能触发
prevent:取消默认事件，如果本标签还有其他的默认事件，比如跳转页面等
once：只生成一次，即只能点击一次，后续点击无效(除非刷信本页面)

  <!-- 只触发一次 -->
        <button @click.once="clickOnce(`这下有用`)">惦记我一次</button>
        <!-- 取消默认事件 -->
        <a href="https://baidu.com" @click.prevent="clickPrevent" > 禁止跳转百度</a>
        <!-- 取消冒泡事件(嵌套的事件) 可以阻止外层的事件-->
        <div @click="alert(1)">
            <div @click.stop="alert(2)">
                <div @click="alert(3)">阻止冒泡</div>
            </div>
        </div>

chage input

change:每次失去/获取焦点都会触发事件
input：每次输入都会触发事件
@是v-on的简写

        <input type="text" @change="loseFocus">
        <input type="text" @input="inputChage">

详细代码1：v-text，v-html，v-if ，v-isShow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>vue指令 1 v-text v-if</title>
    <!-- 凡是v-开头的都是vue指令 -->
</head>
<body>
    <div id="app">

        <!-- v-text,v-html可以与innerText，innerHtml相比较 -->
        <!-- 此处v-text，v-html与插值表达式的区别是：
            1.如果设置了延迟加载，v-text在延迟时间未到时，不会展示，差值表达式则显示{{msg}}字样的数据
            2.<p>{{msg}} niubi</p> 会显示niubi -插入式的数据渲染
              <p v-text="msg">niubi</p> 此时插值表达式将niubi替代掉，只显示msg的值 --整体式的数据替换 -->
        <!-- 注意:如无必要，尽量不适用或者禁止使用v-html，避免xss跨站脚本攻击     -->
        <p v-text="msg"></p>
        <p v-html="msg"></p>

       <!--  v-if 有更大开销，适用于不频繁切换显示状态，并且初始渲染时不必渲染 如果结果为false，则不显示任何数据
                  可以搭配v-else
        v-show 开销较小 ，适用于频繁切换显示状态  如果结果为false，则会添加一个style为none的样式 -->
        <p v-if="isShow">{{msg}}</p>
        <p v-else> v-else --{{count}}</p>
        <p v-show="isShow">{{msg}}</p>
    </div>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                msg:"<b>hello</b>",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                },
                isShow:false
            },
            mounted(){
                console.log(this.msg);
            },
            methods:{

            }
        });
    </script>
</body>
</html>

详细代码2：click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>指令集 click </title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!-- 无参时，此处clickMe函数加不加()都无所谓 -->
        <!-- @表示v-on:click的简写形式 -->
        <button v-on:click="clickMe">惦记我</button>
        <button v-on:click="clickThis(`这下有用`)">惦记我1</button>
        <button @click="clickThis(`这下有用`)">惦记我2</button>
        <!-- @click.once @click.prevent @click.stop 最常用的 -->
        <!-- 只触发一次 -->
        <button @click.once="clickOnce(`这下有用`)">惦记我一次</button>
        <!-- 取消默认事件 -->
        <a href="https://baidu.com" @click.prevent="clickPrevent" > 禁止跳转百度</a>
        <!-- 取消冒泡事件(嵌套的事件) 可以阻止外层的事件-->
        <div @click="alert(1)">
            <div @click.stop="alert(2)">
                <div @click="alert(3)">阻止冒泡</div>
            </div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                },
                isShow:false
            },
            mounted(){

            },
            methods:{
                clickMe(){
                    this.msg="惦记我也没有用"
                },
                clickThis(param){
                    this.msg=param
                },
                clickOnce(){
                    alert("触发了我")
                },
                clickPrevent(){
                    alert("我也被触发了");
                }
            }
        });
    </script>
</body>
</html>

详细代码3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>指令集 change</title>
</head>
<body>
    <div id="app">
        <!-- change文本框失去焦点时触发 input 只要改变就会触发 -->
        <input type="text" @change="loseFocus">
        <input type="text" @input="inputChage">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"hello",
                count:1,
                arr:[1,23,4],
                obj:{
                    name:"zengyu",
                    age:14
                },
                isShow:false
            },
            methods:{
                loseFocus(){
                    alert("失去焦点了")
                 },
                inputChage(){
                   console.log( "输入框被改变了");
                }
            }
        });
    </script>
</body>
</html>

Ca_va

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue入门 vue基础之简单使用2--指令集

指令集：指令集是指指令的集合，而指令:凡是v-开头的都是vue指令详细代码看最后v-text v-html初始化vue这里使用setTimeout函数设置延迟1s后生成Vue对象(有用) <script> setTimeout(() => { var vm= new Vue({ el:"#app", data:{ msg:"<b>hello&
复制链接

扫一扫

专栏目录