vue.js学习笔记

up主:ilovecoding

1. 认识vue

  • vue:读音类似于view,莫说成v-u-e。
  • vue是一个渐进式的框架。vue可以作为应用的一部分嵌入其中,可广泛用于一点一点的项目重构。
  • 常见高级功能:解耦视图和数据;可复用组件;前端路由技术;状态管理;虚拟dom

vue.js安装

1.直接cdn应用,参考官方文档。
2.下载和引入,参考官方文档。
3.nmp安装。

vue初学习

1. 官网下载vue.js。
2. 引入vue.js    
3. 创建div元素,设定元素id   
{{message}}
4. 创建vue对象,管理div元素
 let app = new Vue({
       el:'#app',  //用于挂载要管理的元素 
       data:{  // 定义数据
           message:'hello , world'
       },
       method:{
            change:function (){ this.message = '今天天气真好' }
       }
   })

Vue中的MVVM

 Model : Plain javascript Objects       
 View : DOM 
 ViewModel: Vue实例

Vue的options选项
① el :string类型 || HTMLElement
el:’#app’, 可以用HTMLElement替换字符串‘#app’,例如 el:document.querySelector()
② data: Object || Function(组件当中data必须是一个函数)
③ methods : {[key:string]:function}
④ 生命周期函数
拓展:开发中什么叫函数?什么叫方法
方法:method,写在实例里,类里,和实例对象挂钩
函数:function,写在实例外面,类外面。直接写在
java只有方法没有函数。

Vue的生命周期

生命周期:vue实例从创建到销毁的过程。
beforeCreate:
created:
beforeMount:
mounted:
beforeUpdate:
updated:
beforeDestroy:
destroyed:

Mustache语法{{}}

Mustache:胡子,胡须
data:{
message :'morning",
name:“小可爱”,
num:1
}
mustache语法中 不仅可以直接写变量 ,也可以写简单的表达式
①{{message}} ②{{message + name}} ③{{message + ’ ’ +name}}
④{{ num * 2 }}

v-once

该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。

v-html

用于插入html代码

data:{ url:"百度一下", }

v-text

将数据显示在界面中,通常情况下,接收一个string类型,类似mustache语法,但是不够灵活。

,李银河

data:{ message:"你好啊", }

结果:‘,李银河’会被你好啊覆盖。

v-pre

用于跳过这个元素和它子元素的编译过程,用于显示的Mustache语法

{{message}}

data:{ message:"你好啊", }

结果:

{{message}}


v-cloak仅作了解
cloak:斗篷。


//在vue解析之前,h2中有一个属性v-cloak //在vue解析之后,h2中没有一个属性v-cloak

{{message}}

let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 message:'hello , world' }, })

v-bind

用于动态绑定属性。
语法糖 ‘:’
① 动态绑定class

  • 动态绑定对象 :class={active:isActive , line : isLine},在data里定义isActive和isLine,值为boolean类型,为true时渲染类名,例如class=“active line”
  • 动态绑定方法 :class=“getClass()”
    getClass(){
    return {active:this.isActive , line : this.isLine}
    }
  • 动态绑定数组 class="[‘isActive’, 'isLine’]" , isActive加引号表示字符串,不加引号表示变量。

计算属性

① 基本使用

 

{{fullName}}

{{getFullName()}}

let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 firstName:'Li', lastName:'James' }, //计算属性 computed:{ fullName:function(){ return this.firstName+ ' '+this.lastName //对应下面的get方法 } } method:{ getFullname(){ return this.firstName+ ' '+this.lastName } } })

② 复杂操作

 

总价格:{{tPrice }}

let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 books:[ {id:1,name:'java基础',price:26} {id:11,name:'java深入理解',price:27} {id:12,name:'java工程师',price:28} ] }, //计算属性 computed:{ totalPrice:function(){ let tPrice = 0; //for使用方法1 for(let i = 0; i< this.books.length;i++){ tPrice += this.books[i].price } //for使用方法2 for(let i in this.books){ tPrice += this.books[i].price } //for使用方法2 for(let book of this.books){ tPrice += this.book.price } } } })

//哪儿难了 coding老师骗人。

计算属性的setter和getter

 

{{fullName}}

let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 firstName:'Li', lastName:'James' }, //计算属性 computed:{ //计算属性一般没有set方法,是只读属性。 fullName:{ get:function(){ return this.firstName+ ' '+this.lastName } } } })

计算属性和method方法对比

 

{{fullName}}

{{fullName}}

{{getFullName()}}

{{getFullName()}}

let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 firstName:'Li', lastName:'James' }, //计算属性 computed:{ fullName:function(){ console.log('---'); return this.firstName+ ' '+this.lastName //对应下面的get方法 } } method:{ getFullname(){ console.log('---'); return this.firstName+ ' '+this.lastName } } })

对比以后,计算属性只打印一次,method打印两次 计算属性的性能更好

v-on -> @

绑定事件监听器

  1. 事件定义时,写函数省略小括号,但方法本身需要一个参数,这时vue会默认将浏览器产生的event事件作为参数传入到方法中
    @click = “addNum”
    addNum(num){
    console.log(num);//会在控制台将事件打印出来
    }
  2. 在调用方法时,如何手动获取到浏览器参数的event对象: e v e n t @ c l i c k = “ a d d N u m ( 123 , event @click = “addNum(123, event@click=addNum(123,event)”
    addNum(a,event){
    console.log(a);
    console.log(event);//会在控制台将事件打印出来
    }
  3. v-on的修饰符
   
按钮
//② .prevent 阻止默认事件的调用,如下,阻止表单默认提交
//⑤ .once只触发一次回调 const app = new Vue({ el:'#app', //用于挂载要管理的元素 method:{ btnClick(){ console.log('---','btn'); } divClick(){ console.log('---','div'); } keyup(){ console.log('---keyup'); } })

条件判断 v-if和v-else && v-if v-else-if v-else

v-for遍历对象

 
    //遍历对象的过程中,只获取一个值时,获取的是value
  • {{ value}} - {{ key }}
    • {{ index}} - {{ item}}
let app = new Vue({ el:'#app', //用于挂载要管理的元素 data:{ // 定义数据 movices:['海娃','海贼王','加勒比海盗','海的女儿'], currentIndex = 0; })

过滤器

   

你可能感兴趣的:(vue.js)