美文网首页
简单遍历vue2.0文档(一)

简单遍历vue2.0文档(一)

作者: 前端咸蛋黄 | 来源:发表于2019-05-02 17:43 被阅读0次
    1. 软件架构模式

    MVC模式:

    • 控制器(Controller)- 负责其他
    • 视图(View) - 图形界面设计
    • 模型(Model) - 实现应有功能,进行数据管理

    MVVM模式:

    • 模型(Model)- 数据修改和操作的业务逻辑
    • 视图(View)- 将数据模型转化为UI
    • 视图模型(ViewModel)- 同步模型和视图数据
    2. Vue优点
    • 低耦合:视图(View)可以独立于模型变化和修改
    • 可重用:可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑
    • 独立开发:可以专注于业务逻辑和数据的开发
    3. 生命周期钩子

    每个 Vue 实例在被创建时都要经过一系列的初始化过程,同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

    下面介绍四个常用钩子:

    • created:在实例创建完成后被立即调用。
    • mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
    • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
    • destoryed:Vue 实例销毁后调用。
    <div id='app'>{{message}}</div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!'
        },
        created () {
          alert('created')
        },
        mounted () {
          alert('mounted')
        },
        updated () {
          alert('updated')
        },
        destroyed () {
          alert('destroyed')
        }
      })
    </script>
     //初始化data后执行created
     //初始化el后执行mounted,确定后message被渲染
     //app.message = "Hello,World!"后执行updated,确定后Hello,World!被渲染
     //app.$destroy()后执行destroyed
    
    4. 过滤器
    <div id='app'>{{message | upMsg}}</div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!'
        },
        filters: {
          upMsg:function(value){
            return value.toUpperCase()
          }
        }
      })
    </script>
    
    5. 常见指令
    • v-text
    <div id='app' v-text=message></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!'
        }
      })
    </script>
    
    • v-html
    <div id='app' v-html=message></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: '<p>Hello,Vue!</p>'
        }
      })
    </script>
    
    • v-bind
      用来绑定任何活的属性。
    <style>
      .blue{
        border: 1px solid blue
      }
      .red{
        color: red;
      }
    </style>
    <div id='app'>
      <p v-bind:class=['red','blue']>{{message}}</p>
      <p :class={red:true,blue:false}>{{message}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!'
        }
      })
    </script>
    
    • v-on
      ·stop:阻止单击事件冒泡
      ·prevent:提交事件不再重载页面
      ·once:事件将只会触发一次
    <div id='app'>
      <button v-on:click=plus>加</button>
      <button @click.once=plus>减</button>
      <span>{{num}}</span>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!',
          num:1
        },
        methods: {
          plus:function(){
            this.num +=1
          },
          sub:function(){
            this.num -=1
          }
        }
      })
    </script>
    
    • v-cloak
      和CSS一起使用,这个指令保持在元素上直到关联实例结束编译。
    <style>
      [v-cloak]{
        color: red
      }
    </style>
    <div id='app' v-cloak>
      {{message}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!',
        },
      })
    </script>
    
    • v-if
    <div id='app'>
      <p v-if='1+1===3'>{{message1}}</p>
      <p v-else>{{message2}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message1: 'Hello,Vue!',
          message2: 'Hello,World!',
        },
      })
    </script>
    
    • v-for
      以object为例,默认先遍历value
    <div id='app'>
      <li v-for='msg in message'>{{msg}}</li>
      <li v-for='(val,key,index) in message'>{{val}},{{key}},{{index}}</li>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: {
            '键1':'值1',
            '键2':'值2'
          }
        },
      })
    </script>
    
    • v-show
      v-show 和v-if 不显示元素的区别在于,v-show渲染了元素,设置display为none,v-if直接没渲染
    <div id='app'>
      <p v-show=true>{{message}}</p>
      <p v-show=false>{{message}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          message: 'Hello,Vue!'
        },
      })
    </script>
    
    • v-model
      用于在表单类元素上双向绑定事件
    <div id='app'>
      <div>
        <input v-model=text>input is {{text}}
      </div>
      <div>
        <select v-model=item>
          <option>选项1</option>
          <option>选项2</option>
          <option>选项3</option>
        </select>
        select is {{item}}
      </div> 
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          text:'',
          item:''
        },
      })
    </script>
    
    7. 计算属性
    • 计算属性 vs 模板内表达式:计算属性适用于逻辑复杂时,模板内表达式适用于逻辑简单时
    • 计算属性 vs methods:计算属性有缓存,在数据变化时执行,方法在触发渲染时执行
    • 计算属性 vs 侦听器:计算属性仅用来计算,侦听器用来进行异步操作或者上报数据等变大较大的操作
    <div id='app'>
      year: {{plus}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          num:2018
        },
        computed: {
          plus:function(){
            return this.num+1
          } 
        }
      })
    </script>
    

    相关文章

      网友评论

          本文标题:简单遍历vue2.0文档(一)

          本文链接:https://www.haomeiwen.com/subject/bpwnnqtx.html