专栏首页前端路桥vue[0x02] -- 基础特性

vue[0x02] -- 基础特性

拆解一个vue.js实例进行分析

前期工作

我们做这样一件事情:

第一步:创建一个html文件index.html

第二步:引入远程的vue的CDN文件

第三步:在body中书写楼下代码段

<div id="app">
    <input type="text" name="" v-model="message" id=""><br />
    <p>{{message}}</p>
</div>

紧接着我们就开启我们的探索吧!

探索发现

如何绑定一个Vue实例,或者说如何创建一个vue实例并挂载到对应节点?

方法一:el方式为实例提供挂载方式,比如说这里我要把它挂载在id为app的div元素上,那就需要这么些el: '#app'

这里还需要明确的一点是你可以这样写

let vm = new Vue({
    el: "#app",
    data: {
        message: "just do it!"
    }
})

你也可以这样写

new Vue({
    el: "#app",
    data: {
        message: "just do it!"
    }
})
方法二:mount挂载
let vm = new Vue({
    data: {
        message: "just do it!"
    }
})

vm.$mount('#app');

关于template在html中的应用,跟layui其实蛮像的,在这点上

我们还是改造楼上的例子,创建一个script脚本

<script id="tpl" type="x-template">
    <div class="tpl">
        <p>祝大家新春快乐!</p>
    </div>
</script>

然后对应的vue实例改成这样

let vm = new Vue({
    el: "#app",
    data: {
        message: "just do it!"
    },
    template: '#tpl'
})

你会发现这样一个现象,我本来时挂载到id为app的div上的,但是它并没有这么做。

关于数据data属性

最开始我们讲了,挂载实例的两种方式,不知你是否注意到我在el那里贴了两段接近一样的话,其中后者你不好在浏览器或者其他代码块去访问一些像data的属性,这里提一下吧。

关于data的写法

你可以这样写

data: {
    message: "just do it!"
}

你也可以这样写

data() {
    return {
        message: "just do it!"
    }
}

这里我们着重看第一种写法,它是一个对象吧。那么这里想要搞事情,我们自然而然地想去实例外部创建一个对象然后赋值给data里面地属性来进行观察对吧,那开始吧。

把它改造成如楼下这样,笔者分别选了对象、数组、数值、字符串

 let arr = [2, 0, 2, 0];
    let obj = {
        name: 'ataola',
        age: 23
    };
    let str = 'hello world';
    let num = 1997;
    let vm = new Vue({
        el: "#app",
        data: {
            message: "just do it!",
            arr,
            obj,
            str,
            num
        }
    })

可以看到笔者把数据搞到了data上。。。。。。

那我们接下来要做的事情可能同学们已经猜到了,改值呗,看看两者的变化。

这里提一下如果是你要获取data里面的元素,那么就需要vm.$data.message这样写,或者直接vm.message

由于楼上那张图已经很明了地介绍了vue实例中data的情况,那么接下来我们再看看原先我们声明的变量吧,记住它的模样,原先它长这样,后面就可能被我改的不知道啥鬼样了。。。。。。

这里希望读者注意下,就是除了message是页面用到的,其他页面都没啥卵用,注意你更新了页面会变化吗?在这里其实vue内部是做了优化的。基于MVVM模型,就是说页面相关的数据改变了我才更新视图。

可以看到vue中的data对传入的对象只是进行了浅拷贝,就是说你改变了外面的其实也会影响vue里面的data里面的对象。

这里留一个坑吧,可能后续也会整理到我的vue疑问专题,就是说找茬嘛,我就要它深拷贝,有没有办法?有兴趣的同学思考下告诉我!

还有一个要提及一下就是怎么将数据和视图进行绑定。

如果其是一个块状元素,例如p,那么你大可<p>{{message}}</p>这样搞,

如果说是一个表单元素,那么你可以用v-model,不过这个在早期vue版本并没有这个属性。

这里提及一下,你可以通过vue.$set('key', 'val')去增加一个变量,但是会报错

[Vue warn]: Cannot set reactive property on undefined, null, or primitive value: key

所以推荐你一开始就设计下,不要想到啥用啥,个人比较不喜欢和这种程序员共事,贼心累贼头大。

组件

组件是一个蛮沉重的话题,我们不断地去学习一些技术框架,最后都应该以组件地形式输出,所以意义重大,这个在后面地专题应该会进行深入探讨,这里就意思下。

我们做这样一件事,创建一个组件

<div id="taola">
    <taola-component title="3.1415926535" content="山顶一寺一壶酒,两人我杀我"></taola-component>
</div>
<script>
    let taolaComponent = Vue.component('taola-component', {
        props: ['title', 'content'],
        data() {
            return {
                author: 'ataola'
            }
        },
        template: '<div><h1>{{title}}</h1><p>{{content}}</p><p>{{auther}}</p></div>'
    });
    new Vue({
        el: '#taola'
    })
  
</script>

翻译到页面如楼下,这里我们注册了一个全局组件,然后知道下父子组件之间用props传值,所以你放到data里面的报错,渲染不上去。

报了个错

Property or method "auther" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Vue中的方法methods

这部分内容深究下,关于this指向会在后面的专题介绍,这里就简单意思下做一个点击增加次数的案例

在html中加入

<button @click ="add" >被点击了{{count}}次</button>

在vue实例化中增加methods方法

methods: {
    add: function() {
        this.count++
    }
}

生命周期

这个话题依旧很沉重,你若问我有哪些以目前的记忆力都能记得住,但深究下去去分析应用场景这个我不一定能够很好地回答,所以这里暂时先定个脉络,后面专题去深究具体w问题具体分析。

那我们就来看下一些主要的生命周期钩子函数吧。

没有什么图比官网来的更贴切实在的了

init: function () {
    console.log('2.0中 init更名为beforeCreate,所以你看不到!')
},
beforeCreate: function () {
    console.log('beforeCreate: 在实例开始初始化时同步调用!');
},
beforeCompile: function () {
    console.log('2.0中已废弃,推荐楼下的created,所以你看不到!');
},
created: function () {
    console.log('created: 在实例创建之后调用!');
},
beforeMount: function () {
    console.log('beforeMount: 新增于2.0,先于mounted!');
},
compiled: function () {
    console.log('2.0中已经更名为mounted,所有你看不到!');
},
attached: function () {
    console.log('2.0中已经废弃,所有你看不到!')
},
detached: function () {
    console.log('2.0中已经废弃,所有你看不到!')
},
ready: function () {
    console.log('2.0中已经废弃,推荐mounted,所有你看不到!')
},
mounted: function () {
    console.log('mounted: 指令生效,DOM更新,但不保证$el已插入文档!')
},
beforeDestroy: function () {
    console.log('beforeDestroy: 在开始销毁实例时调用,此时实例仍然有效!')
},
destroyed: function () {
    console.log('destroyed: 在实例销毁后调用,实例和子实例被销毁,解绑了!')
},
beforeUpdate: function() {
    console.log('beforeUpdate: 2.0中新增!');
},
updated: function() {
    console.log('updated: 2.0中新增!');
},
activated: function() {
    console.log('activated: 2.0中新增,需配合kepp-live!');
}

反映到浏览器中如下:

过滤器

Vue.js 允许在表达式后添加可选的过滤器,以管道符“|”指示, 例如

{{ name | uppercase }} // VUE
是个vue内置过滤器
  • capitalize:字符串首字符转化成大写
  • uppercase :字符串转化成大写
  • lowercase :字符串转化成小写
  • currency 参数为{String}[ 货币符号] ,{Number} [ 小数位],将数字转化成货币符号,并且会自动添加数字分节号。
  • pluralize 参数为{String} single, [double, triple],字符串复数化。
  • json 参数为{Number}[indent] 空格缩进数,与JSON.stringify() 作用相同,将json对象数据输出成符合json 格式的字符串。
  • debounce 传入值必须是函数,参数可选,为{Number}[wait],即延时时长。作用是当调用函数n 毫秒后,才会执行该动作,若在这n 毫秒内又调用此动作则将重新计算执行时间。
  • limitBy 传入值必须是数组,参数为{Number}limit,{Number}[offset], limit 为显示个数,offset 为开始显示数组下标。
  • filterBy 传入值必须是数组,参数为{String | Function} targetStringOrFunction,即需要匹配的字符串或函数(通过函数返回值为 true 或 false 来判断匹配结果);“in”( 可选分隔符);{String}[…searchKeys],为检索的属性区域。
  • orderBy 传入值必须是数组,参数为{String|Array|Function}sortKeys,即指定排序策略。

PS: 2.0已经移除了这些内置过滤器

指令(Directives)

这些很死,记记背背的东西,抓重点形如v-xxx这种大致就是指令了或者@xx,这边就不展开了,还是后面开个专题吧!

值得一提的是修饰符,就是说可以这样写v-on:click.stop="doClick", stop相到于e. stopPropagation(), 望须知!

类似的有

.stop: 等同于调用event. stopPropagation()。
.prevent: 等同于调用event.preventDefault()。
.capture: 使用capture 模式添加事件监听器。
.self: 只当事件是从监听元素本身触发时才触发回调。

计算属性computed

举个例子吧,写过markdown的同志应该有感触,一些应用可以让你边写边实时渲染,它做的就是这么个事情,监听属性的变化。

写法上形如这种:

computed: {
    fun: {
        set: function(){

        },
        getL function() {

        }
    },
    func2: function() {

    }
}

这里我们在html中编写如下代码:

<input type="text" name="" v-model="message" id=""><br />
<p>{{message}}</p>
<input type="text" name="" v-model="message2" id=""><br />
<p>{{message2}}</p>
<p>{{m1m2}}</p>

在vue的computed属性中这么写:

data: {
    message: "just do it!",
    message2: "ataola is me !",
},
computed: {
    m1m2: function() {
        return this.message + " | " + this.message2;
    }
}

效果如图所属:

其实真正好玩的是,用计算属性的set和get去操作一些DOM、cookie、sessionStorage、localStorage之类的,这里就意思下,在后面专题我们再深究。

Class与Style绑定

开发中经常做的一件事就是动态地增加或者删除类,比如说tab组件的切换。

这里比如说你在一个标签中运用了v-bind:classs="v-bind:calss="{'active' : active , 'unactive' : !active}",

那么你只需要在data属性里设置active为true就行了。

渲染的结果就是 <div class="tab active"></div>

如果是多个类可以以数组的方式传递 v-bind:class="[classA, classB]"

如果你要绑定样式用v-bind:style,用法和楼上一样,注意绑定的是内联样式,还有个好处就是它会帮你加前缀。

模板渲染

模板渲染这块内容会涉及到一些遍历指令,你想嘛,大致就是拿个对象数组字段集合哈希表进行遍历输出显示嘛,早期前端做的是静态页面,死的数据,而模板的渲染这块要靠后端的嵌入php、jsp、asp代码完成,但现在更多的是后端给个接口,前端通过Ajax进行异步交互获取数据然后进行模板渲染,前后端更加专注做自己的事了吧,然后就是符合数据驱动视图。

Vue.extend(options)

创建基础Vue 构造器的“子类”,参数options 对象和直接声明Vue 实例参数对象基本一致

大致如下写法

let Child = Vue.extend({
    // coding
});

Vue.component('ataola-child', Child);
<ataola-child></ataola-child>

参考文献

《Vue.js前端开发快速入门与专业应用》

组件基础:https://cn.vuejs.org/v2/guide/components.html

组件注册:https://cn.vuejs.org/v2/guide/components-registration.html

参考文献:https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%

选自《Vue涂鸦》系列文章

原文地址:https://github.com/ataola/vue-Graffiti/blob/master/note/vue-normal.md

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue[0x01] -- Hello World

    如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早...

    丰臣正一
  • Javascript[0x01] -- 数组(一)

    具体的还是去看书本或者一些文档吧,这里就是简单地踩个点,那么我们直接进入到问题思考环节。

    丰臣正一
  • Vue[0x03] - Vue基础实践

    抓重点讲吧,最开始可追溯的版本号是0.6.0这个,但是正式对外发布的版本是在2014年1月24日发布的0.8.0。后面就是两个打头的里程碑,一个是1.x.x,一...

    丰臣正一
  • pyppeteer爬虫

    解决方案:---- https://github.com/miyakogi/pyppeteer/pull/160/commits/63b364a19840ed9...

    用户2337871
  • 盘点 | 对比图像分类五大方法:KNN、SVM、BPNN、CNN和迁移学习

    选自Medium 机器之心编译 参与:蒋思源、黄小天、吴攀 图像分类是人工智能领域的基本研究主题之一,研究者也已经开发了大量用于图像分类的算法。近日,Shiyu...

    机器之心
  • [在线+源码]vue全家桶+Typescript开发一款习惯养成APP

    基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址 欢迎star

    前端博客 : alili.tech
  • 刷新ImageNet纪录,GAN不只会造假!DeepMind用它做图像分类,秒杀职业分类AI

    DeepMind的两位大佬,改造了“史上最强”的BigGAN,让新的算法去做图像分类,刷新了ImageNet无监督表征学习的纪录。

    量子位
  • python3_04.循环&函数

    py3study
  • 浅谈物联网中的信息安全

    我是一名物联网专业的大三学生。近段时间我们刚刚开始了物联网信息安全的学习,算是稍微对这方面有了一点点认识。下面简单分享一下。

    文艺小青年
  • 使用R语言展示我们生信技能树全国巡讲的征程

    两个月过去了,又去了几个城市,图该更新了,这可咋办。向来不喜欢走回头路,于是就另寻他法了。 胡乱搜索一下,发现R语言可以做!

    生信技能树

扫码关注云+社区

领取腾讯云代金券