86 vue.js常用属性

其他 2018-11-07 21:22:33 阅读次数: 0

主要内容:https://pizzali.github.io/B%A4/

1 vue.js的使用方式及文本插值

<div id="app">{{ greeting }}</div>
<script>
        new Vue({
        el: "#app",
        data: {
            greeting: "Hello Vue",
        }
    })
</script>

　　采用原生的dom

 // 原生js
        let odiv = document.getElementById("app-01");
        odiv.innerText = "Hello Vue!";

2 常用指令:

　　2.1 v-text: 类似于双大括号渲染数据的另外一种方式

<div id="app" v-text="greeting"></div>
<script>
        new Vue({
        el: '#app',
        data: {
            greeting: "Hello World"
        }
    })
</script>

　　2.2 v-html: 由于v-test无法渲染标签字符串, 所以引出v-html

<div id="app" v-html="greeting"></div>
<script>
       new Vue({
        el: "#app",
        data: {
            greeting: "<h1>Hello Vue</h1>"
        }
    })
</script>

　　2.3 v-for : 数组和对象的渲染方式

<div id="app">
    <ul>
        <li v-for="aihao in fuming">{{aihao}}</li>
    </ul>
    <ul>
        <li v-for="student in students">姓名:{{student.name}}年龄:{{student.age}}爱好:{{student.hobby}}</li>
    </ul>
</div>
<script>
        new Vue({
        el: '#app',
        data: {
            fuming: ['黄袍哥', '吃鸡', '大鱼大肉'],
            students:[
                {
                    name: '张敏聪',
                    age: 23,
                    hobby: 'girls',
                },
                {
                    name:'毛尖妹妹',
                    age: 18,
                    hobby: 'study',
                },
            ],

        }
    })
</script>
View Code

　　2.4 v-if: 渲染数据的时候根据条件进行判断

<div id="app">
    <div v-if="role == 'cainingning'">
        <h1>欢迎美女光临</h1>
    </div>
    <div v-else-if="role == 'juyingying'">
        <h2>'''''</h2>
    </div>
    <div v-else>
        <h1>努力学习</h1>
    </div>
</div>
<script>
       let vm = new Vue({
        el: '#app',
        data:{
            role: 'cainingning'
        }
    })
</script>

　　2.5 v-show: 

<div id="app">
    <div v-show="isShow">Hello yiyi</div>
</div>
<script>
       //v-开头的数据就是帮我们渲染数据用的
    let vm = new Vue({
        el: '#app',
        data: {
            isShow: true,
        }
    })
</script>

　　　　注意: v-if 的底层采用的是appendChild来实现的, v-show通过样式的display控制标签的显示

　　　　加载性能：v-if加载速度更快，v-show加载速度慢

　　　　切换开销：v-if切换开销大，v-show切换开销小

　　　　v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　　　一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

　　2.6 v-bind: 绑定属性, 冒号后面跟标签的属性, 属性后面的等号指向数据,

<div id="app">
    <a v-bind:href="jingdong">去京东</a>
    <div :class="[isActive]"></div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data:{
            jingdong: "https://www.jd.com",
            isActive: 'active',
        }
    })
</script>

　　2.7 v-on:使用v-on可以在标签上面绑定事件,注意新建的实例vue.app 中多了一个属性, methods, 在methods中, 是我们具体事件的实现方式

<div id="app">
    <h1 :class="{ active: isActive}">闷骚哥</h1>
    <button v-on:click="changeColor">点击变粉</button>
</div>
<script>
   let vm = new Vue({
        el: '#app',
        data:{
            isActive: false
        },
        methods: {
            changeColor: function () {
                this.isActive = !this.isActive
            }
        }
    }) 
</script>

　　2.8 v-model:  当我们修改数据后, 修改后的数据能够及时的渲染到模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name"/>
    <input type="checkbox" value="男" v-model="genders"/>
    <input type="checkbox" value="女" v-model="genders"/>
    <select v-model="girlfriends" multiple>
        <option>毛尖妹妹</option>
        <option>小萌芽</option>
        <option>宁宁</option>
    </select>
    <hr>
    {{name}}
    {{genders}}
    {{girlfriends}}
</div>
<!--v-model 当我们修改数据后, 修改后的数据能够及时的渲染到模板-->
<script>

    let vm = new Vue({
        el: "#app",
        data:{
            name: 'juyingying',
            genders:[],
            girlfriends:[]
        }
    })
</script>
</body>
</html>
View Code

　　　　v-model: 计算属性和监听:  ,(一下两个有一个有属性和监听的详细解释和区别)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python</td>
            <td><input type="text" v-model="python"></td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model="vue"></td>
        </tr>
         <tr>
            <td>go</td>
            <td><input type="text" v-model="go"></td>
        </tr>
        <tr>
            <td>总成绩</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
   {{sumScore}}
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            python:88,
            vue:89,
            go:90,
        },
        //计算
        computed:{
            //在页面加载的时候执行
            sumScore: function () {
                console.log(1);
                return this.python + this.vue + this.go
            }
        },
        //当计算的逻辑比较复杂时, 引入了watch
        //当data里面的数据发生改变的时候, 才会执行, 用于监听data的改变
        watch:{
            python: function () {
                console.log(2);
                alert("python 被修改了")
            }
        }

    })
</script>
</body>
</html>
View Code

　　2.9 常用指令之指令修饰符:  number:可以转换成数字, lazy: 移除光标时计算

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python</td>
            <td><input type="text" v-model="python"></td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model="vue"></td>
        </tr>
         <tr>
            <td>go</td>
            <td><input type="text" v-model="go"></td>
        </tr>
        <tr>
            <td>总成绩</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
    <hr>
    {{python}}
   {{sumScore}}
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            python:88,
            vue:89,
            go:90,
        },
        //计算
        computed:{
            //在页面加载的时候执行
            sumScore: function () {
                console.log(1);
                return this.python + this.vue + this.go
            }
        },
        //computes, 也可以实现监听事件,但是当计算逻辑比较复杂的时候, 加载速度慢, 所以不合适, 
        //当data里面的数据发生改变的时候, 才会执行, 用于监听data的改变
        watch:{
            python: function () {
                console.log(2);
                alert("python 被修改了")
            }
        }

    })
</script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
        <tr>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <!--number就是指令修饰符, 把他转换成数字 , lazy就是退出光标后计算-->
            <td>python</td>
            <td><input type="text" v-model.number.lazy="python"> </td>
        </tr>
        <tr>
            <td>vue</td>
            <td><input type="text" v-model.number.lazy="vue"> </td>
        </tr>
        <tr>
            <td>go</td>
            <td><input type="text" v-model.number.lazy="go"> </td>
        </tr>
        <tr>
            <td>总成绩</td>
            <td>{{sumScore}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            python: 88,
            vue: 99,
            go: 100
        },
        computed:{
            sumScore: function () {
                console.log(this);
                return this.python + this.vue + this.go
            }
        }

    })
</script>
</body>
</html>
View Code

　 2.10 常用指令之后去dom元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
    <style>
        .active {
            background-color: #c1e2b3;
        }
    </style>
</head>
<body>
<div id="app">
    <div ref="myRe">peiqi</div>
    <!--<div :class="[isActive]">peiqi</div>-->
    <button v-on:click="changeColor">点击让佩奇变绿</button>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isActive:'active',
            },
            methods: {
                changeColor:function () {
                    console.log(this);
                    this.$refs.myRe.className = this.isActive
                }
            }
        })
    </script>
</div>
</body>
</html>
View Code

　2.11 常用指令之自定义指令:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
    <style>
        .box {
            width: 50px;
            height: 60px;
            background-color: #5bc0de;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-pos.right.bottom="post" class="box">Hello World</div>
    <!--<div v-pos="post" class="box">Hello World</div>-->
</div>
<script>
    Vue.directive('pos', function (el, bindding) {
       console.log('el', el);
       console.log('bindding', bindding);
       let decorators = bindding.modifiers;
       if(bindding.value){
           //方法一
           // el.style['position'] = 'fixed';
           // el.style['right'] = 0;
           // el.style['bottom'] = 0;
           //加指令修饰符
           el.style['position'] = 'fixed';
           for(let key in decorators){
               el.style[key] = 0
           }
       }
    });
    //自定义属性
    let vm = new Vue({
        el: '#app',
        data:{
           post: true
        }
    })
</script>
</body>
</html>

　　

　

猜你喜欢

转载自www.cnblogs.com/gyh412724/p/9925684.html
86
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022