02 - 数据绑定和第一个Vue应用

最新推荐文章于 2022-10-13 08:29:41 发布

_浮游

最新推荐文章于 2022-10-13 08:29:41 发布

阅读量177

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39483925/article/details/82257955

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写在前言

本章主要介绍与Vue.js有关的一些概念与技术，并帮助你了解它们背后相关的工作原理。即使从未接触过Vue.js，对于有一定JavaScript的同学也可以运用这些知识点快速构建一出一个Vue.js应用。本章不会一步步从零开始演示，会根据传统的写法给出相应Vue.js的写法。

Vue.js是什么？

Vue. js的官方文档中是这样介绍它的。

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

简单小巧是指Vue. js压缩后大小仅有17KB。所谓渐进式（ Progressive），就是你可以一步一步、有阶段性地来使用Vue. js，不必一开始就使用所有的东西。你会深刻感受到这一点，这也正是开发者热爱Vue. js 的主要原因之一。

使用Vue. js 可以让Web开发变得简单，同时也颠覆了传统前端开发模式。它提供了现代Web开发中常见的高级功能，比如：

解耦视图与数据。
可复用的组件。
前端路由。
状态管理。
虚拟DOM（ Virtual DOM）。

简单介绍一下Vue直接上代码

示例中主要包含以下功能：

实例与数据
生命周期
插值与表达式
过滤器
指令与事件

index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue示例</title>
    </head>

    <body>
        <div id="app">     

            <p>数据绑定：{{oneBook}}</p>
            <p>集合数据值存储方式：
                <ul>
                    <li v-for="book in books">{{book.name}}</li>
                </ul>
            </p>
            <p>数据双向绑定：<input type="text" v-model="name"  placeholder="你的名字">{{name}}</p>
            <p>时时输出浏览器默认的时间格式：<br/>{{date}}</p> 
            <p>超链接：<span v-html="link"></span></p>
            <p>防XSS攻击，此P标签里的的元素和子元素跳过编译过程：<span v-pre>{{name}}{{link}}</span></p>
            <p>
                JavaScript表达式
                <ul>
                    <li>简单运算：{{number/10}}</li>
                    <li>三元运算符：{{isOK?'确定':'取消'}}</li>
                    <li>字符串倒叙：{{text.split(',').reverse().join(',')}}</li>
                </ul>
            </p>
            <!-- 过滤器应该用于简单的文本转换，如果要实现更为复杂的数据转换，因该使用计算属性 computed -->
            <p>过滤器：
                <ul>
                    <li>格式化时间：{{date | formatDate}}</li>
                    <!-- <li>串联：{{ message | filterA | filterB }}</li> -->
                    <!-- 这里的字符串 arg1 和 arg2 将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身 -->
                    <!-- <li>接受参数：{{ message | filterA('arg1','arg2')}}</li> -->
                </ul>
                
            </p>
            <P>指令与事件：
                <ul>
                    <li>
                        当数据show的值为true时，p元素会被插入，为false时则会被移除。<br/>
                        数据驱动DOM是Vue.js的核心理念，所以不到万不得已时不要主动操作DOM<br/>
                        只需要维护好数据，DOM的事Vue会帮助处理
                    </li>
                    <li><p v-if="show">显示这段文本</p></li>
                </ul>
            </P>
            <p> 动态更新HTML 元素上的属性，比如id、class等:<br />
                示例中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据<br />
                链接和图片都会自动更新
                <ul>
                    <li>
                        <p>链接地址</p>
                        <a v-bind:href="url">链接</a>
                        <img v-bind:src="imgUrl">
                    </li>
                </ul>
            </p>
            <p>v-on绑定事件监听器<br/>
                <ul>
                    <p v-if="show">这是一段文本</p>
                    <button v-on:click="handleClose">点击隐藏</button>
                    <button v-on:click="handleOpen">点击显示</button>
                </ul>
            </p>

        </div>   

        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script src="D:/Develop/PROJECT/wiki/vue/app.js"></script>


    </body>
</html>

对应绑定的app.js

var padDate = function (value) {
    // body...
    return value < 10 ? '0' + value : value;
};

/*
 * 创建Vue对象
 */
var app = new Vue({

    el:'#app',   //可以理解为document.getElementById("app")  
    data:{
        name: '管大山',
        oneBook: '《Vue.js实战》',
        books:[
            {name: '《Vue.js实战》'},
            {name: '《JavaScript语言精粹》'},
            {name: '《JavaScriot高级程序设计》'}
        ],
        date: new Date(),
        link: '<a href="#">这是一个链接</a>',
        number: 100,
        isOK: false,
        text: '123,456',
        show: true,
        url: 'https://www.github.com',
        imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535696237657&di=1559bdf675ecea6f3741719fb564416d&imgtype=0&src=http%3A%2F%2Fphoto.tuchong.com%2F298391%2Ff%2F5020936.jpg'

    },
    /*
     * 绑定的事件要处理复杂的业务逻辑，建议还是在methods里声明一个方法
     * 这样可读性更强也好维护
     * Vue.js将methods里的方法也代理了，所以也可以像访问Vue数据那样来调用方法
     */
    methods:{
        
        /*
         * 此处调用colse函数多此一举
         * 为了演示methods函数里函数可相互调用的方法，业务中经常会用到
         */
        handleClose : function () {
            this.close();
        },
        close : function (argument) {
            // body...
            this.show = false;
        },
        handleOpen : function () {
            // body...
            this.show = true;
        }
    },
    /*
     *对应实例的拦截器
     */
    filters:{
        
        formatDate:function (value) {
            // body...
            var date = new  Date(value);
            var year = date.getFullYear();
            var month = padDate(date.getMonth() + 1);
            var day = padDate(date.getDate());
            var hours = padDate(date.getHours());
            var minutes = padDate(date.getMinutes());
            var seconds = padDate(date.getSeconds());

            //将整理好的数据返回去
            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

        }
    },
    /*
     * 实例创建完成后调用，此阶段完成数据的监测，但尚未挂载，$el尚不可用。
     * 需要初始化处理一些数据时会比较有用
     */
    created: function(){
        
        
    },
    /*
     * el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
     */
    mounted: function() {
        
        var _this = this; //声明一个变量指向Vue的实例this
        this.timer = setInterval(function() {
            // body...
            _this.date = new Date();
        }, 1000);
    },
    /*
     *实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等
     */
    beforeDestroy:function() {
        
        if(this.timer){
            clearInterval(this.timer);  //在Vue实例销毁之前，清除定时器
        }
    }
})

html中的JS路径需修改成自己本地路径，引用的Vue.js路径为获取最新稳定版本，也可以自己指定版本。

同学们可以挨个<p>标签对应JS中VUE实例中date里的值参照。

_浮游

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 - 数据绑定和第一个Vue应用

写在前言本章主要介绍与Vue.js有关的一些概念与技术，并帮助你了解它们背后相关的工作原理。即使从未接触过Vue.js，对于有一定JavaScript的同学也可以运用这些知识点快速构建一出一个Vue.js应用。本章不会一步步从零开始演示，会根据传统的写法给出相应Vue.js的写法。 Vue.js是什么？Vue. js的官方文档中是这样介绍它的。简单小巧的核心，渐进式技术栈，足以...
复制链接

扫一扫

专栏目录