• Vue学习



    Vue学习
      数据绑定
        {{ msg }} 双向
        {{* msg }} 只绑定一次
        {{{ htmlInfo }}} 表示htmlinfo里 有html标签 ,里面的{{}}将不可用
        Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>') 可以动态html并包含{{}}
        {{number+1}}  {{ok?'yes':'no'}} {{message.split('').reverse().join('')}} 支持js表达式,不支持语句,if,支持三元
        {{ message | filterA | filterB 'arg1' }} 过滤器,可接收参数,不能和js表达式混合,第一参数为message,2为 'arg1'
        <p v-if="greeting">Hello!</p> 指令 可以写表达式判断
        <a v-bind:href="url"></a> == <a href="{{url}}"></a>
        <a v-bind:href="url"></a>==<!-- 缩写 --><a :href="url"></a>
        <a v-on:click="doSomething"></a>==<a @click="doSomething"></a>
      计算属性
        var vm = new Vue({
           el: '#example',
           data: {
            a: 1
           },
           computed: {
            // 一个计算属性的 getter
            b: function () {
             // `this` 指向 vm 实例
             return this.a + 1
            }
           }
          })
      观察属性
        var vm = new Vue({
             data: {
              firstName: 'Foo',
              lastName: 'Bar',
              fullName: 'Foo Bar'
             }
            })

            vm.$watch('firstName', function (val) {
             this.fullName = val + ' ' + this.lastName
            })
      计算Setter
          computed: {
           fullName: {
            // getter
            get: function () {
             return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
             var names = newValue.split(' ')
             this.firstName = names[0]
             this.lastName = names[names.length - 1]
            }
           }
          }
      绑定class
        案例  
          <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
          data: {isA: true,isB: false}

          <div v-bind:class="classObject"></div>
          data: {
               classObject: {
                'class-a': true,
                'class-b': false
               }
              }
      条件渲染
        <h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
          v-show 不同 是改变display
          v-else 可以跟在上面俩个后面
      列表渲染
        v-for
          <ul id="example-1">
           <li v-for="item in items">
            {{$index}}---{{ item.message }}
           </li>
          </ul>
          别名
            <div v-for="(index, item) in items">
             {{ index }} {{ item.message }}
            </div>
          <div v-for="item of items"></div> 新版的
          template
            <ul>
             <template v-for="item in items">
              <li>{{ item.msg }}</li>
              <li class="divider"></li>
             </template>
            </ul>
          vue.js包装的数组方法,能触发视图更新
            push() example1.items.push({ message: 'Baz' })
            pop()
            shift()
            unshift()
            splice()
            sort()
            reverse()
            非变异方法 filter(), concat() 和 slice() 不会修改
              example1.items = example1.items.filter(function (item) {
                 return item.message.match(/Foo/)
                })
              替换数组
          track-by 可以设置数组的标识 用来复用
          问题
            vm.items[0] = {} 不认, vm.items.$set(0, { childMsg: 'Changed!'})
            vm.items.length = 0 不认,vm.items=[];
          删除
            this.items.$remove(item)
          $key
            <ul id="repeat-object" class="demo">
             <li v-for="value in object">
              {{ $key }} : {{ value }}
             </li>
            </ul>
            <div v-for="(key, val) in object">
                 {{ key }} {{ val }}
            </div>
            <div>
             <span v-for="n in 10">{{ n }} </span>
            </div>
          过滤器 filterBy 和 orderBy
      方法处理
        绑定方法
          var vm = new Vue({
           el: '#example',
           data: {
            name: 'Vue.js'
           },
           // 在 `methods` 对象中定义方法
           methods: {
            greet: function (event) {
             // 方法内 `this` 指向 vm
             alert('Hello ' + this.name + '!')
             // `event` 是原生 DOM 事件
             alert(event.target.tagName)
            }
           }
          })

          // 也可以在 JavaScript 代码中调用方法
          vm.greet()
          //或html中
          <div id="example">
           <button v-on:click="greet">Greet</button>
          </div>
        内联
          <button v-on:click="say('hi')">Say Hi</button>
          <button v-on:click="say('hello!', $event)">Submit</button> // $event.preventDefault() 事件原生对象
      表单绑定
        v-model 
          <input type="text" v-model="message" placeholder="edit me">
          <!-- 当选中时,`picked` 为字符串 "a" -->
          <input type="radio" v-model="picked" value="a">
          <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
          <input type="radio" v-model="pick" v-bind:value="a"> // 选中 vm.pick === vm.a
        参数特性
          lazy 默认在input事件中同步,加了 lazy 改为 change中同步 <input v-model="msg" lazy>
          number <input v-model="age" number> 保持为数字
          <input v-model="msg" debounce="500"> 延时同步
      过度 (没太细看)
        <div v-if="show" transition="my-transition"></div>
        <div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
        Vue.transition('bounce', {
         enterClass: 'bounceInLeft',
         leaveClass: 'bounceOutRight'
        })
      组件
        案例
          // 定义
          var MyComponent = Vue.extend({
           template: '<div>A custom component!</div>'
          })

          // 注册
          Vue.component('my-component', MyComponent)

          // 创建根实例
          new Vue({
           el: '#example'
          })
          // 在一个步骤中扩展与注册,data,el参数选项必须是函数
          Vue.component('my-component', {
           template: '<div>A custom component!</div>'
          })
          // 局部注册也可以这么做
          var Parent = Vue.extend({
           components: {
            'my-component': {
             template: '<div>A custom component!</div>'
            }
           }
          })

  • 相关阅读:
    如何安装Anaconda和Python
    Vue 语法的一些小问题
    uni-app 常用框架内置方法 更新中 .....
    uni-app 生命周期函数
    Koa2 遇到Method Not Allowed 获取不到返回值
    安装 NodeJ Koa2、3 + 独立插件 cli脚手架 npm cnpm Vue
    vue使用video.js解决m3u8视频播放格式
    Oracle迁移至MySQL
    Spring的15点总结
    全文搜索引擎选 ElasticSearch 还是 Solr?
  • 原文地址:https://www.cnblogs.com/heroy/p/5486995.html
Copyright © 2020-2023  润新知