Vue指令

最新推荐文章于 2023-04-13 23:14:01 发布

Java程序猿哦~

最新推荐文章于 2023-04-13 23:14:01 发布

阅读量160

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_64896985/article/details/123980590

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <div>{{msg}}</div>
        <!-- 设置元素的文本 -->
        <div v-text="msg"></div>
        <!-- 设置元素的innerHTML,内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 -->
        <!-- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。 -->
        <div v-html="msg1"></div>
        <!-- 跳过这个元素和它的子元素的编译过程。 -->
        <div v-pre>{{msg1}}</div>
        <!-- 只渲染一次 -->
        <div v-once>{{msg}}</div>
        <div>{{msg1}}</div>
        <!-- 在表单控件或者组件上创建双向绑定 表单元素的值/变量的值进行了修改，这个变量的值也会跟着修改-->
        <input type="text" v-model="msg1"/>
        <div>{{num}}</div>
        <!-- v-on 绑定事件监听器 v-on:click 绑定一个单击事件 点击之后执行num++ -->
        <button v-on:click="num++">点我1</button>
        <!-- v-on缩写 @  与上面效果一样 -->
        <button @click="num++">点我2</button>
        <!-- 点击执行一个方法 -->
        <button @click="nums">点我3</button>
        <!-- $event代表对象 -->
        <button @click="handle('123','456',$event)">点我3</button>
    </div>
    <script type="text/javascript">
      var vm=new Vue({
            el:"#app",
            data:{
                msg:"helloword!",
                msg1:"<h2>hello vue</h2>",
                num:0
            },
            // 实例方法用methods
            methods: {
               // 方法名 nums
                nums:function(){
                    // 这里的this相当于vm
                    console.log(this==vm);
                    this.num++;
                },
                 // 方法名handle,参数 p p1  event代表对象
                handle:function(p,p1,event){
                    // 这里的this相当于vm
                    console.log(this==vm);
                    console.log(p,p1);
                    //target触发事件对象 innerHTML获取内容
                    console.log(event.target.innerHTML);
                    this.num++;
                }
            },
        })
    </script>
</body>
</html>

Java程序猿哦~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equiv="X-U.
复制链接

扫一扫

Vue指令

“相关推荐”对你有帮助么？