《前端》vue.js全览复习--2020年8月4日

最新推荐文章于 2023-03-02 14:54:06 发布

bellediao

最新推荐文章于 2023-03-02 14:54:06 发布

阅读量222

点赞数 1

分类专栏：前端 VUE.JS

本文链接：https://blog.csdn.net/bellediao/article/details/107735642

版权

前端同时被 2 个专栏收录

257 篇文章 1 订阅

订阅专栏

VUE.JS

62 篇文章 0 订阅

订阅专栏

vue基本框架格式

    <!--1、 先引入 -->
    <script src="js/vue.js"></script>
    <!-- 2、定义一个div 定义一个id -->
    <div id="app">
        <button>{{msg}}</button>
        <h3 id="app">{{ message }}</h3>
    </div>
    <script>
        // 3、 Vue constructor
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "你好 bella",
                message: "Hello Vue.js!"
            },
            methods: {}
        })
    </script>

新手易错点：

var vm = new Vue({}) 容易忘记new。
el: "#app",不要忘记#。

vue模板语法之文本插入

前面例子中可以看到所使用的“{{ }}”就是最简单的文本模板插入方式。

除此之外，最基础的文本插入方式还有 HTML代码插入、属性插入、表达式插入等。

注意：v-once 只会执行一次插入文本的操作。具体来说，就是当改变vue构造器属性值时，不会同步更新contentOnce所显示的内容。

<div id='id-div-vue'>
    <h3>{{ title }}</h3>
    <p v-text="content"></p>
    <p v-once>{{ contentOnce }}</p>
</div>
<div>
    <button id="id-btn-change-data" onclick="on_btn_change_text()">尝试修改文本</button>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#id-div-vue',
        data: {
            title : "Vue模板语法(文本插入)",
            content : "这里是v-text插入，一会尝试修改本行的文本内容.",
            contentOnce : "尝试修改本行的文本内容."
        }
    });

    function on_btn_change_text() {
        app.$data.content = "修改本行的文本内容完成!";
        console.log("data.content is modified : " + app.$data.content);
        app.$data.contentOnce = "修改本行的文本内容完成!";
        console.log("data.contentOnce is modified : " + app.$data.contentOnce);
    }
</script>

v-cloak、v-text、v-bind、v-html

使用 v-cloak 能够解决插值表达式闪烁的问题。当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

要在样式表里：

[v-cloak] {
display: none;
}

`v-text`没有加载闪烁问题，它会覆盖元素中原本的内容，但是插值表达式，只会替换自己的这个占位符，不会把整个元素的内容清空。

`v-html`和`v-text'类似，但是`v-html`做成html的样子。

v-bind:绑定指定。如绑定类、样式、文本等。

eg：v-bind:class="{ active: isActive }"

v-bind:style="{ color: activeColor, fontSize: fontSize }"

<div id='id-div-vue'>
    <h3 v-text="msg"></h3>
    <p v-bind:title="vbindContent">页面更新时间(通过鼠标悬停查看)</p>
    <div v-html="htmlContent"></div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#id-div-vue',
        data: {
            msg : "动态绑定HTML代码",
            vbindContent : new Date().toLocaleString(),
            htmlContent: '<h1>Vue模板语法(HTML插入)</h1>'
        }
    });
</script>

`v-model`--`双向数据绑定`

注意： v-model 只能运用在表单元素中。

input(radio, text, address, email....) select checkbox textarea。

写法：v-model="msg"。

v-if、v-for、v-on

v-if和v-show：通过Vue条件语句可以实现可见/隐藏效果。

不同之处：v-if 显示隐藏是将 dom 元素整个添加或删除，而 v-show 隐藏则是为该元素添加css--display:none，dom元素还在。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <p v-if="show">{{ content }}</p>
    <p v-if="hide">{{ content }}</p>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#id-div-vue',
        data: {
            title: "Vue条件语句",
            content: "通过Vue条件语句可以实现可见/隐藏效果.",
            show: true,
            hide: false
        }
    });
</script>

v-for 和`key`属性：Vue循环语句.

<li v-for="li in arrLi">

{{ li.text }}

</li>

其中arrLi是data中的数组。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <ol>
        <li v-for="li in arrLi">
            {{ li.text }}
        </li>
    </ol>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#id-div-vue',
        data: {
            title: "循环语句",
            arrLi: [
                {text: 'JavaScript'},
                {text: 'React'},
                {text: 'Vue.js'}
            ]
        }
    });
</script>

v-on：Vue事件监听处理

监听点击事件：v-on:click="onShowHide"

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <p v-if="show" v-html="contentShow"></p><br>
    <p v-if="hide" v-html="contentHide"></p><br>
    <button v-on:click="onShowHide">切换“显示/隐藏”效果</button>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#id-div-vue',
        data: {
            title: "Vue条件语句",
            contentShow: "通过Vue条件语句可以实现<b>可见</b>效果.",
            contentHide: "通过Vue条件语句可以实现<b>隐藏</b>效果.",
            show: true,
            hide: false
        },
        methods: {
            onShowHide: function () {
                if(this.show) {
                    console.log(this.show);
                    this.show = false;
                    this.hide = true;
                } else {
                    console.log(this.show);
                    this.show = true;
                    this.hide = false;
                }
            }
        }
    });
</script>

事件修饰符

.stop：阻止冒泡（阻止父级dom节点事件被触发）

.prevent ：阻止默认事件（如a不会触发跳转）

.capture :添加事件侦听器时使用事件捕获模式

.self :只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

Vue构造器属性修改

Vue构造器"data"参数

Vue构造器的date参数定义的属性实际上就是一个 json 结构数据，那么也可以在外面单独定义这个属性。这里主要是改变了date参数属性值的定义方式。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <h3>{{ content }}</h3>
    <p>{{ all() }}</p>
</div>
<script type="text/javascript">
    var data = {
        title : "Vue构造器\"data\"参数",
        content : "定义\"data\"参数属性的另一种方法."
    }
    var app = new Vue({
        el: '#id-div-vue',
        data: data,
        methods: {
            all : function () {
                return this.title + " : " + this.content;
            }
        }
    });
</script>

为验证同步性：进行Vue构造器属性同步

通过浏览器控制台进行属性值的同步输出验证。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <h3>{{ content }}</h3>
    <p>{{ all() }}</p>
</div>
<div>
    <button id="id-btn-data" onclick="on_btn_data()">通过data对象修改属性</button>
    <button id="id-btn-app" onclick="on_btn_app()">通过app对象修改属性</button>
</div>
<script type="text/javascript">
    var data = {
        title : "Vue构造器\"data\"参数",
        content : "定义\"data\"参数属性的另一种方法."
    }
    var app = new Vue({
        el: '#id-div-vue',
        data: data,
        methods: {
            all : function () {
                return this.title + " : " + this.content;
            }
        }
    });
    /**
     * func button click - data
     */
    function on_btn_data() {
        if(app.title === data.title) {
            data.title = "Vue构造器修改属性";
            console.log("修改data.title为: Vue构造器修改属性");
            console.log("app.title= " + app.title);
        }
    }
    /**
     * func button click - app
     */
    function on_btn_app() {
        if(app.content === data.content) {
            app.content = "通过app对象修改content属性.";
            console.log("修改app.content为: 通过app对象修改content属性.");
            console.log("data.content= " + data.content);
        }
    }
</script>

为验证响应式：进行Vue构造器修改属性

为了进一步验证Vue构造器所定义的属性与页面视图所渲染的内容之间完全是响应式的，可以通过修改属性的操作进行测试。下面通过一个Vue构造器修改属性实现响应式页面效果的代码实例。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <h3>{{ content }}</h3>
    <p>{{ all() }}</p>
</div>
<div>
    <button id="id-btn-data" onclick="on_btn_data()">通过data对象修改属性</button>
    <button id="id-btn-app" onclick="on_btn_app()">通过app对象修改属性</button>
</div>
<script type="text/javascript">
    var data = {
        title : "Vue构造器\"data\"参数",
        content : "定义\"data\"参数属性的另一种方法."
    }
    var app = new Vue({
        el: '#id-div-vue',
        data: data,
        methods: {
            all : function () {
                return this.title + " : " + this.content;
            }
        }
    });

    /**
     * func button click - data
     */
    function on_btn_data() {
        if(app.title === data.title) {
            data.title = "Vue构造器修改属性";
        }
    }

    /**
     * func button click - app
     */
    function on_btn_app() {
        if(app.content === data.content) {
            app.content = "通过app对象修改content属性.";
        }
    }
</script>

Vue构造器参数引用

在vue框架中提供了一个“$”符前缀符号来引用vue构造器的参数，以便将其与用户自定义的属性进行区分。

<div id='id-div-vue'>
    <h1>{{ title }}</h1>
    <h3>{{ content }}</h3>
    <p>{{ getData() }}</p>
    <p>{{ getEl() }}</p>
</div>
<script type="text/javascript">
    var data = {
        title : "Vue构造器参数引用",
        content : "通过Vue构造器参数渲染页面."
    }
    var app = new Vue({
        el: '#id-div-vue',
        data: data,
        methods: {
            getEl : function() {
                if(this.$el === document.getElementById('id-div-vue')) {
                    return this.$el.innerText;
                }
            },
            getData : function () {
//判断构造器app的data参数（注意$的引用）和data属性（前面定义的json对象）是否恒等
                if(this.$data === data) {
                    return eval(this.$data);
                }
            }
        }
    });
</script>