vue简介

官网上有介绍,这里粘出来

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

数据双向绑定

页面的数据和js变量绑定,

实例

数据同步

  1. // 我们的数据对象
  2. var data = { a: 1 }
  3. // 该对象被加入到一个 Vue 实例中 ,两者数据保持同步
  4. var vm = new Vue({
  5. data: data
  6. })
  7. // 他们引用相同的对象!
  8. console.log(vm.a === data.a); //.a === data.a // => true
  9. // 设置属性也会影响到原始数据
  10. vm.a = 2
  11. console.log(data.a) // => 2
  12. // ... and vice-versa
  13. data.a = 3
  14. console.log(vm.a) // => 3

  Vue的属性data可以引用外部对象。数据同步

实例方法:\(watch 以\)开头的函数

  1. /*
  2. * Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  3. */
  4. console.log('--------------')
  5. var data2 = { a: 1 }
  6. var vm = new Vue({
  7. el: '#example',
  8. data: data2
  9. })
  10. console.log(vm.$data === data2) // => true
  11. console.log(vm.$el === document.getElementById('example')) // => true
  12. // $watch 是一个实例方法
  13. vm.$watch('a', function (newValue, oldValue) {
  14. // 这个回调将在 `vm.a` 改变后调用
  15. alert(543);
  16. })
  17. vm.a=123;

实例的生命周期

  1. var vue1 = new Vue({
  2. el:'#div1',
  3. data: {
  4. a: 1
  5. },
  6. //事件的绑定,成员发生改变
  7. updated : function(){
  8. alert('vue1 is updated')
  9. // console.log('update..');
  10. },
  11. created: function () {
  12. // this 指向 vm 实例
  13. alert('vue1 is created')
  14. console.log('a is: ' + this.a)
  15. }
  16. });
  17. // => "a is: 1"
  18. $('#btnUpdate').click(function(){
  19. vue1.a='hello world';
  20. })

属性绑定

将div标签内的内容加载进去,可以解析

表达式解析

  1. <div id="div1">
  2. {{1==1?'yes':'no' }} <br />
  3. {{msg}}<br /><br />
  4. 可以使用vue的数据和JS的函数,msg.split(' '),<br />
  5. 变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组<br />
  6. push()
  7. pop()
  8. shift()
  9. unshift()
  10. splice()
  11. sort()
  12. reverse()<br />
  13. {{msg.split(' ')}} <br />
  14. </div>

指令

  指令 (Directives) 是带有 v- 前缀的特殊属性。

  指令属性的值预期是单个 JavaScript表达式

  (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,

  将其产生的连带影响,响应式地作用于 DOM。

v-if 可预见性

  1. <div id="div1" v-if="seen">
  2. 指令 v-if
  3. </div><br />

v-bind 属性绑定

  1. <div id="div2">
  2. <a v-bind:href="link">连接到</a>
  3. </div>

v-on 时间绑定

  1. <div id="div3">
  2. <button v-on:click="fun">dosomething</button>
  3. </div>
  1. //另一个例子是 v-on 指令,它用于监听 DOM 事件:
  2. //<a v-on:click="doSomething">
  3. var app3=new Vue({
  4. el:'#div3',
  5. data:{
  6. a:1
  7. },
  8. event:{
  9. fun:function(){
  10. alert(123)
  11. }
  12. }
  13. });

计算属性和观察者

计算属性:

  与函数的区别:

  • 不同的是计算属性是基于它们的依赖进行缓存的。
  • 如果依赖数据没有改变,那么不在执行函数,直接返回该属性值
  • 这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:
  1. var vm=new Vue({
  2. el:'#example',
  3. data:{
  4. message:'hello world'
  5. },
  6. computed:{
  7. reversedMessage:function(){
  8. console.log('setter....')
  9. return this.message.split('').reverse().join(',');
  10. }
  11. },
  12. methods:{
  13. //我们可以将同一函数定义为一个方法而不是一个计算属性
  14. //程序结束时,会被调用一次,利用栈的原理
  15. fun1:function(){
  16. console.log('methods fun 被调用了...')
  17. return 'hello';
  18. }
  19. }
  20. });
  21. //这里我们声明了一个计算属性 reversedMessage。
  22. //我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数:
  23. console.log('后'+vm.reversedMessage) // => 'olleH'
  24. vm.message = 'Goodbye'
  25. //如果message发生改变,那么计算属性会重新计算
  26. console.log('后'+vm.reversedMessage) // => 'eybdooG'

  计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

  1. var vm=new Vue({
  2. el:'#example',
  3. data:{
  4. firstName:'bob',
  5. lastName:'admin'
  6. },
  7. computed:{
  8. fullName: {
  9. // getter
  10. get: function () {
  11. return this.firstName + ' ' + this.lastName
  12. },
  13. // setter
  14. set: function (newValue) {
  15. var names = newValue.split(' ')
  16. this.firstName = names[0]
  17. this.lastName = names[names.length - 1]
  18. }
  19. }
  20. }
  21. });

观察者:

  watch:

  question:function(){}

当vue data的属性变量,发生变化时,自动执行watch函数

  1. var watchExampleVM = new Vue({
  2. el: '#watch-example',
  3. data: {
  4. question: '',
  5. answer: '请输入用户名!'
  6. },
  7. watch: {
  8. // 如果 question 发生改变,这个函数就会运行
  9. question: function (newQuestion) {
  10. // this.answer = '等待输入中..'
  11. //alert(newQuestion)
  12. this.getAnswer()
  13. }
  14. },
  15. methods: {
  16. getAnswer:function(){
  17. if(this.question.length<4||this.question.length>10){
  18. this.answer='用户名长度必须为5-9位';
  19. }
  20. else
  21. {
  22. this.answer='符合条件'
  23. }
  24. }

绑定class

  三种方式:

  1. <script>
  2. // al
  3. $(function(){
  4. var app1=new Vue({
  5. el:'#div1',
  6. data:{
  7. isActive:true,
  8. }
  9. });
  10. var app1=new Vue({
  11. el:'#div2',
  12. data:{
  13. isActive:true,
  14. //可以使用,比较方便
  15. info:{
  16. red:true,
  17. size:true
  18. }
  19. }
  20. })
  21. })
  22. </script>
  23. </head>
  24. <body>
  25. <div id="div1" class="static" v-bind:class="{ active: isActive }"></div>
  26. 可以使用对象
  27. <div id="div2" class="static" v-bind:class="info"></div>
  28. 数组用法
  29. <div v-bind:class="[{ active: isActive }, errorClass]"></div>
  30. </body>
  31. </html>

列表渲染

数组for

items:[

  {message:'Foo'},

  {message:'Bar'}

]

  1. <ul id="ul1">
  2. <li v-for="item in items">
  3. {{ item.message }}
  4. </li>
  5. </ul>
  1. <ul id="ul2">
  2. <li v-for="(index,item) in items">
  3. {{ item.message }}--{{index}}
  4. </li>
  5. </ul>

  修改data: vue.items[1]={message:'new values'}

对象属性:

  1. data:{
  2. object:{
  3. a:'mon',
  4. b:'admin',
  5. c:123
  6. },
  7. users:[
  8. {name:'admin',age:'33'},
  9. {name:'bob',age:'23'}
  10. ]
  11. }
  1. <ul id="v-for-object" class="demo">
  2. <li v-for="value in object">
  3. {{ value }}
  4. </li>
  5. <li v-for="(value,key) in object">
  6. {{ value }} -{{key}}
  7. </li>
  8. <li v-for="value in users">
  9. {{ value.name }} -{{value.age}}
  10. </li>

组件

注册组件

全局注册

Vue.component(tagName, options)

e.g.

  1. Vue.component("tag", {
  2. template: '<div>hello component!</div>',
  3. props:{
  4. }
  5. })

组件在注册之后,便可以作为自定义元素 `` 在一个实例的模板中使用

注意确保在初始化根实例之前注册组件

注意:组件必须在vue实例中才能使用。

局部注册

data必须是函数

组件组合

组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。然而,通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解,从而提高了其可维护性和复用性。

父子组件通信

子组件可使用props和父组件做数据同步:将模板中的属性和父组件的data做数据绑定【v-bind】,在模板中使用props的值,这样就可以间接的使得父子组件进行通信。

使用了v-bind的属性 会当成JavaScript代码进行解析。例如:

->>

属性【props】也可以定义为对象形式,主要用来做数据验证:

props:{

  name:String,

  age:{

    type:Number,

    default:100 | function(){ return 200; },

    required:true

  }...

}

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

当 prop 验证失败,Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验,所以在 defaultvalidator 函数里,诸如 datacomputedmethods 等实例属性还无法使用。

非prop特性

添加特性,也可以给元素添加其他属性【class,id,name等】

对于class属性,如果模板中和元素中出现多个,vue会自动合并

自定义事件

父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。

使用v-bind绑定自定义事件

每个vue实例都实现了事件接口:

  • 使用$on(eventName) 监听事件
  • 使用$emit(eventName, optionPayload)触发事件
  1. <div id="counter-event-example">
  2. <p>{{ total }}</p>
  3. <button-counter v-on:increment="incrementTotal"></button-counter>
  4. <button-counter v-on:increment="incrementTotal"></button-counter>
  5. <button-counter v-on:click.native="incrementTotal"></button-counter>
  6. </div>

在组件根元素上,可以添加原生事件【.native】,也可以添加自定义事件【比较麻烦】

sync修饰符

在一些情况下,我们可能会需要对一个 prop 进行“双向绑定”。【2.4仍然不可以使用】

当一个子组件改变了一个带 .sync 的 prop 的值时,这个变化也会同步到父组件中所绑定的值。【vue1中引入,2.0中删除,2.3中重新引入】

例如:

【在组件根元素中,将foo【props中定义的】属性绑定为父组件的data(bar)】

等价于:<comp :foo="bar" @update:foo="val => bar=val" />

当子组件更新foo属性时,会显式地触发一个更新事件: this.$emit('update:foo', newValue)

一次性绑定多个属性:

v-model 【默认绑定的是value和input事件,一般用于表单输入】

自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定

  1. <currency-input v-model="price"></currency-input>
  2. Vue.component('currency-input', {
  3. template: '\
  4. <span>\
  5. $\
  6. <input\
  7. ref="input"\
  8. v-bind:value="value"\
  9. v-on:input="updateValue($event.target.value)"\
  10. >\
  11. </span>\
  12. ',
  13. props: ['value'],
  14. methods: {
  15. // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
  16. updateValue: function (value) {
  17. var formattedValue = value
  18. // 删除两侧的空格符
  19. .trim()
  20. // 保留 2 位小数
  21. .slice(
  22. 0,
  23. value.indexOf('.') === -1
  24. ? value.length
  25. : value.indexOf('.') + 3
  26. )
  27. // 如果值尚不合规,则手动覆盖为合规的值
  28. if (formattedValue !== value) {
  29. this.$refs.input.value = formattedValue
  30. }
  31. // 通过 input 事件带出数值
  32. this.$emit('input', Number(formattedValue))
  33. }
  34. }
  35. })

自定义组件的v-model

默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突:

  1. Vue.component('my-checkbox', {
  2. model: {
  3. prop: 'checked',
  4. event: 'change'
  5. },
  6. props: {
  7. checked: Boolean,
  8. // 这样就允许拿 `value` 这个 prop 做其它事了
  9. value: String
  10. },
  11. // ...
  12. })

非父子组件的通信

有时候,非父子关系的两个组件之间也需要通信。在简单的场景下,可以使用一个空的 Vue 实例作为事件总线:

使用插槽分发内容

编译作用域

父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

父组件不会感知到子组件的属性。

单个插槽

使用组件模板时,不需要指定标签内的内容,只需要指定属性【用来和父组件通信】。

如果指定了标签内的内容,那么这个内容作为备用信息,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。

01 vue入门的更多相关文章

  1. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  2. vue入门文章

    本来想自己写一篇关于vue入门的文章.但是看到链接的文章后,觉得写得太详细了,实在有保存下来的必要.后面可能在这篇文章基础上,有所内容的增加. CSS预处理器 定义了一种新的专门的编程语言,编译后成正 ...

  3. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  4. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  5. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  6. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  7. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  8. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  9. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

随机推荐

  1. JavaScript - Compiling Vs Transpiling

    参考 https://blog.csdn.net/napolunyishi/article/details/20473799 https://www.stevefenton.co.uk/2012/11 ...

  2. spring security几大核心组件

    一.SecurityContext 安全上下文,用户通过Spring Security 的校验之后,验证信息存储在SecurityContext中 SecurityContext接口只定义了两个方法, ...

  3. scp 常用命令总结

    1, 上传本地文件到服务器:scp /path/local_filename username@servername:/path 例如:例如scp /var/www/test.php  codingl ...

  4. 三 Spring和DI(面试)

      IOC:控制反转,将对象的创建权反转给了Spring DI:依赖注入,前提要有IOC的环境.Spring管理这个类的时候会将类的依赖的属性,在xml注入(设置)进来. 面向对象的时候,类和类之间的 ...

  5. C++ 知识零碎搭建

    全局变量 局部变量 函数不能嵌套定义 C/C++ 变量在将要被使用时定义即可, 不必一开始就声明所有变量 函数的定义与声明的区别 C++常规类型自动类型转换规则 C语言中十六进制和八进制的格式: 二进 ...

  6. Java基础 -3.5

    我觉得上一篇不是很严谨啊 我认为这个逻辑还是正确的 原码.反码.补码: (1)在Java中,所有数据的表示方式都是以补码形式来表示 如果没有特别的说明,Java 中的数据类型默认为int,int数据类 ...

  7. redhat 7.6 配置repo源

    vi /etc/yum.repos.d/base.repo          #编辑配置repo配置文件,如果没有则自动创建,没有影响 name=base     //源名字,起什么名都没影响 bas ...

  8. 说说maven依赖冲突,依赖调解,依赖传递和依赖范围

    说maven依赖冲突之前需要先说说maven的 依赖传递. 依赖传递 当前项目引入了一个依赖,该依赖的依赖也会被引入项目.更加准确的说法是,maven会解析直接依赖的POM,将那些必要的间接依赖,以传 ...

  9. C#Winfrom实现Skyline画直线功能

    C#Winfrom实现Skyline画直线功能 前言: 这里记录了我在学习Skyline二次开发中所遇到的问题,适合刚接触Skyline二次开发的同学查看使用,从逻辑到代码逐一详解,但是还是重在理解, ...

  10. 如何安装第三方模块#Python

    从书上看到用pip install XXX 就可以直接安装模块.下面就是具体操作 1.添加环境变量D:\Python\Scripts\pip.exe 2.打开cmd切换到python安装目录 3.pi ...