day41vue第一天

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>
</head>

<body>
    <div id="app">
        vue原理学习 
    </div>
</body>
<script>
    function vue(option) {
        this.$data = option.data
        this._data = option.data
        this.$el = document.querySelector(option.el)
    }
    vue.prototype.$delete = function $delete() {
        console.log('共有属性 delete能力')
    }
    vue.prototype.$destroy = function $estroy() {
        console.log("共有属性 destroy 能力")
    }
    vue.prototype.$emit = function $emit() {
        console.log("共有属性 emit 能力")
    }
    vue.prototype.$forceUpdate = function $forceUpdate() {
        console.log("共有属性 forceUpdate 能力")
    }
    vue.prototype.$mount = function $mount() {
        console.log("共有属性 mount 能力")
    }
    vue.prototype.$nextTick = function $nextTick() {
        console.log("共有属性 nextTick 能力")
    }
 
 

    var vm = new vue({
        el: '#app',
        data: {
            msg: '你好世界1111',
        }
    })


    console.log(vm)
</script>

</html>

v-text v-html 两个vue 提供的指令

知识点

1 v-html

解析数据中的html代码，渲染到页面中

2 v-text

作用和Mustache 胡子语法比较相似：都是用于将数据显示在界面中

3 网络安全 XSS攻击

XSS攻击全称跨站脚本攻击，是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中，是一种病毒代码寻找宿主的注入攻击。

7 v-pre vue 指令

v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="app">
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            {{msg}}
            <h1 v-pre>
                {{msg}}
            </h1>
        </div> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'你好世界 ',
            }
        })
        console.log(vm)
    </script>
</body>
</html>

8 v-once 指令

该指令后面不需要跟任何表达该指令表示元素只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{{message}}</h2>

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用

1 用于优化更新性能和总要数据的首次渲染二次渲染自动放弃还可以优化性能。

2 一个答题网站用户的最终分数这样的话别的程序员万一误操作改动也能显示初始状态

使用思想

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="app">
           <h1 v-once>{{msg}}</h1>
        </div>    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'你好世界 你好吗',
                msg2:'11111',
                msg3:'11111',
            }
        })
        console.log(vm._data.msg)
        vm._data.msg = 'dsfsdfsdfsdff'
        console.log('this',this)
    </script>
</body>
</html>

9 v-bind 指令

之前学到都是div 或者h1 p 标签等肚子里面的插值表达式和数据的关系 data变了 {{}} 就变的使用方式

但是前端编程中不仅仅有这个还有属性的动态变化

数据视图改变可不仅仅存在于插值表达式在项目中属性也要遵守VUE的数据视图的 MVVM的绑定规则，力与维护和开发

温故而知新的知识二阶段我们是如何改变属性以及缺点

<!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>
</head>
<body>
    <a id="a" title="上海卫视" href="#">aaaaa</a>
    <a id="b" title="上海卫视" href="#">aaaaa</a>
    <a id="c" title="上海卫视" href="#">aaaaa</a>
    <a id="d" title="上海卫视" href="#">aaaaa</a>
    <a id="e" title="上海卫视" href="#">aaaaa</a>
    <a id="f" title="上海卫视" href="#">aaaaa</a>
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('a').title='广州卫视';" />
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('b').title='广州卫视';" />
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('c').title='广州卫视';" />
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('d').title='广州卫视';" />
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('e').title='广州卫视';" />
    <input type="button" value="changeTitle" onclick="javascript:document.getElementById('f').title='广州卫视';" />
</body>
</html>

v-bind绑定属性

1.v-bind介绍

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性们也希望动态来绑定。
作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写： :
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

1 新手学v-bind的时候首先要有一种强烈的意识 v-bind 要干变量

一、v-bind 初理解之绑定变量

v-bind它是一个 vue 指令，用于绑定 html 属性，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="app">
            <p v-bind:title="t1">今天天气很热 气温很高</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                t1: '天气新闻'
            }
        })
    </script>
</body>

</html>

五 v-bind绑定样式对象模式

v-bind绑定样式极大的方便了操作程序的样式动态变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <div id="app">
            <div v-bind:style="{ color: activeColor ,background:activeColor2 }">样式</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeColor: 'green',
                activeColor2:'skyblue'
            }
        })
     
    </script>
</body>

</html>

五 v-bind绑定样式数组模式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div>
        <div id="app">
            <div v-bind:style="[baseStyles, newstyles]">多样式绑定</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                baseStyles: {
                    color: 'green',
                    fontSize: '60px'
                   
                 
                },
                newstyles: {
                    background: 'orange',
                    fontWeight:700
                }
            }
        })


    </script>
</body>

</html>

10 v-on 指令监听指令 click点击事件为最常用的监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div id="app">
           <button v-on:click='num++'>
                {{msg}}  +
             </button>  
             <button v-on:click='aaa'>
                {{msg}}  -
             </button>

             <h1>
                {{num}}
             </h1>
        </div>    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'你好世界',
                num:0
            },
            methods:{
                aaa() {
                    console.log('aaaa')
                    // this.num++
                    // this._data.num++
                    this.$data.num--
                }
            }
        })
    </script>
</body>
</html>

posted on 2022-07-26 22:37 hmkyj 阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

he-maoke

导航

公告

day41vue第一天