Vue学习笔记

Vue基础笔记

一 、MVC与MVVM

1. MVC (单向操作)

  • model 数据
  • View 视图
  • controllor 控制器

2. MVVM (双向数据绑定)

  • model 数据
  • View 视图
  • viewModel 视图模型

二、 利用npm构建vue项目

    npm init -y // 快速初始化
    npm init // 手动设置
    npm install vue // 安装

三、 Vue指令

1. v-model : 表单数据数据双向绑定(后面会有详细介绍)

2. v-html : 标签内容(html)

3. v-once : 只绑定一次,当数据再次改变,页面内容不会刷新

 
{{msg}}

4. v-text : 标签内容

5. v-bind : 强制数据绑定

  绑定图片地址

  View  
      
       // 简化写法
  Data
      let vm=new Vue({
        el: "#app",
        data: {
          imgUrl: 'https://...logo.jpeg'
        }
      })

6. v-on : 绑定事件监听

View  
      
       // 简化写法 @+事件类型
vm
      new Vue(
      {
        el: "#app",
        data: 
        {
          imgUrl: 'https://...logo.jpeg'
        },
        methods: 
        {
          function(msg)
          { // 可传参,可不传
              alert('事件绑定测试')
          }
        }
      })

7. 计算属性和监视(难点)

  • 计算属性 : computed 如果computed里面的属性函数被多次调用,只会执行一次,第一次的结果会被缓存
  • 监视 : watch
View
      
vm new Vue({ el: "#app", data: { msg: "Hello Vue" }, // 计算属性 computed: { new_msg(){ return this.msg + "computed" // new_msg初始化,和当 msg一旦被改变,就会调用这个函数 } }, // 监视 watch: { msg: function(new_value){ // 监视对象:msg 一旦改变,执行回调 this.new_msg = new_value + "watch" } } }) vm2 let vm=new Vue({ el:'#app', data:{ msg:'Hello', msg_watch : "123", firstname : "Peate", lastname : "Chen" }, // 计算属性 computed: { msg_computed(){ return this.msg + " computed"; }, // 单向操作 v-data 当 firstname , lastname 发生改变,返回新fullname1 fullname1(){ return this.firstname + " " +this.lastname }, // 双向操作 v -data- v,当 firstname , lastname 发生改变,返回新fullname2 // 当 fullname2发生改变时,firstname , lastname 同时改变 fullname2: { set(value){ // 监听 fullname2,如果发生改变,去设置 firstname , lastname 的值 const values = value.split(" ") this.firstname = values[0] this.lastname = values[1] }, get(){ // 如果外部代码需要获取 fullname2 就会执行此函数 return this.firstname + " " + this.lastname } } }

8. 强制绑定class和style

class强制绑定:(:class=xxx)

  • xxx传入普通属性字符串 // 不能直接传 css 中的 class ,需要传入Data中声名的 class
  • xxx传入对象形式字符串
  • xxx传入字符串形式数组

style强制绑定:(:style="{color : color_Data , font_size : size_Data}")

  • color_data 须在 data 中定义 : colorA : "red"
  • color_data 可通过 methods 中的函数重新赋值
  

绑定class(字符串)

// 普通字符串

绑定class(对象形式)

// 此类名需与css中类名相同,无需在Data中声名 / let vm=new Vue({ el:'#app', data:{ msg:'Hello', a : "aClass", b : "bClass", isA : true, isB : false }, methods: { updataStyle(){ this.a="bClass" this.isA=true this.isB=false } } }

9. v-if , v-else , v-show 条件渲染

  • v-if : 当 v-if = 真时,被设置的元素才会被添加到页面中,当其为 fales 时,会将这元素对象删除
  • v-else : 默认为真
  • v-show : 为真则显示,为假则隐藏,不会删除元素本身
  

显示

show

methods: { updataStyle(){ this.c=!this.c this.d=!this.d } }

10 . v-for 列表渲染

  • 循环遍历数组
  • 循环遍历对象
  // 循环遍历对象
  • {{p.name}}: {{p.age}}
// 循环遍历对象
  • {{value}} : {{key}}
let vm = new Vue(){
  el    : "#app",
  data  : {
    persons : [
                {name : "chen" , age : 21},
                {name : "ayoung" , age : 20},
                {name : "peate" , age : 21}
              ],
    new_li  : {name : "tom" , age : 21}
  },
  methods : {
    // 删除 li ( splice 方法)
    delete_p(index){
      this.persons.splice(index,1)
    },
    // 更新li ( splice 方法 替换)
    updata_p(index){
      this.persons.splice(index,1,this.new_li)
    }
  }
}

10 . 事件处理

  • 绑定监听
    • 单击事件 : @click

    • 按键事件 : @keyup

    @click = "function( 'abc' , $enent )"  //事件回调函数默认传参 @event
    
    function(str,event){
      alert(event.target.innerHTML + str)
    }
    
  • 事件修饰
    • 停止事件冒泡 @click.stop
    @click.stop = "function()" // 停止事件冒泡
    
    • 组织事件默认行为 @click.prevent
    @click.prevent = "function()" // 阻止默认行为
    
  • 按键修饰符
    • 只有少数按键有
    @keyup.enter = "function()" // 按键以 "enter" 键抬起时触发回调
    

11. 表单数据自动收集

  • 收集的数据是各表单项的 value 值 , 单/多选项分组是根据 v-model 的值

  • 如果 v-model 的值中包含 value值 则会被选中

  • 表单项中的 value 值如果和 v-model 在 Data 中的数据匹配上了则会被选中


        
        
        
        
        
        
        

        
// 收集的数据是各表单项的 value 值 , 单/多选项分组是根据 v-model 的值

// 如果 v-model 的值中包含 value值 则会被选中

// 表单项中的 value 值如果和 v-model 在 Data 中的数据匹配上了则会被选中

let vm=new Vue({
            el:'#app',
            data:{
                sex         : "man",
                sex1        : "test",
                Hobbys      : ["Rap"],
                Citys       : [ {id : 1 , city_name: "武汉"},
                                {id : 2 , city_name: "桂林"},
                                {id : 3 , city_name: "昆明"}
                              ],
                CityId      : 3                         
            },

12. Vue 生命周期

// 由一个场景引入生命周期 :

  /* 你的页面一加载就需要调用一个定时器,这时你需要把它定义在哪个周期呢 ?
     
  /* 当你在 vm 中调用了定时器,如果这时需要你去销毁 vue ,之前调用的定时器不会跟随
    着销毁,这时需要自己在 BeforeDestroy 周期时销毁定时器。

当你实例化一个 vue 后,会有以下阶段 :

  • 初始化阶段

    • beforeCreate() (监听数据 ,初始化事件)
    • Created()
    • beforeMount() (处理数据,为数据挂载到页面)
    • mounted() (数据挂载完毕)
  • 数据更新阶段

    • beforeUpdate()
    • updated()
  • VM销毁阶段

    • beforeDestroy()
    • destroyed()

  let Vm=new Vue(){
    el : "#app",
    data : {

    },
    mounted(){
      //数据挂载完毕后设置定时器
      this.intervalid = setInterval(() =>{
                    this.isA = !this.isA
                },1000)
    },
  }

13. Vue 动画

Vue 不是动画的生产者,而是 CSS 动画的搬运者,在运行过程中给元素添加动画效果的类

14. 过滤器

  • 过滤器常用于格式化 String ,只能在两个地方用 : {{ }} 和 v-bind 表达式中使用

  • 过滤器分私有和全局 ,写法稍有不同

  • 过滤器可以叠加调用

一个例子:

  格式化获取的系统时间

HTML:

  

{{ date | date_filter }}

//当解析到 date 时不会直接显示,先执行过滤,再显示

{{ date | date_filter('HH:mm:ss') }}

//可传入格式参数 JS: // 自定义全局过滤器 Vue.filter('date_filter' , (value , format)=>{ // 第二个参数为格式参数 return moment(value).format(format || 'YYYY/MM/DD HH:mm'); //传了参数则用format,也可用ES6参数默认值 }) let Vm = new Vue(){ el : '#app' data : { date : new Date(), }, // 私有过滤器 (加s) filters: { date_filter: function(value , format){ return moment(value).format(format || 'YYYY/MM/DD HH:mm'); } } }

14 . ref 指令指定标签唯一标识

  • 可通过此指令获取元素内容
  

内容

// 获取 p 标签内容 alert(this.$refs.refName.innerHTML)

四、自定义指令

  • 全局指令
    • 输入型参数一: 指令名
    • 输出型参数二: 元素对象
    • 输出型参数三: 包含指令信息的对象
  

Vue.directive('my-command', function(el , binding){ // 对所在元素的相关操作 el.innerHTML = binding.value.toUpperCase() // 转换为大写,value 就是 msg })

  • 局部指令
  let Vm = new Vue(){0
    el : '#',
    data :{
      msg : 'My Command'
    },
    // 定义局部指令
    directives : {
      'my-command' : function(el , binding){
         el.innerHTML = binding.value.toUpperCase()
      }
    }
  }

你可能感兴趣的:(Vue学习笔记)