zoukankan      html  css  js  c++  java
  • vue笔记

    1、组件的注册必须在vue实例之前

    1   Vue.component("mycom",{
    2           template:"<h1>我是测试的组件</h1>"
    3       })
    4      new Vue({
    5          el:"#app"
    6      })

    2、methods 和 computed 中方法的调用

      https://segmentfault.com/a/1190000014478664?utm_source=tag-newest

      methods 中的方法调用的时候,需加括号,eg:fun()

      computed 中的方法调用,不用加括号,eg:fun

    3、v-model的使用

    <div id="app">
        <input type="text" v-model="name">
        <p>{{name}}</p>
    </div>
    
    new Vue({
       el:"#app" ,
       data:{
           name:"blue"             
       }          
    })

    4、路由的简单使用  

      如果是直接引入的vue-router.js 文件,可以直接使用;

      如果是import 引入的 import VueRouter from 'vue-router',要 Vue.use(VueRouter)

      a)html中定义<router-link :to="/foo"></router-link> ,注意to属性中的值一开始要加斜杠 / 

      b) html中添加路由容器:<router-view></router-view>

      c)js代码定义: 

    let router = new VueRouter({
       routers:[
           {
                path:"/foo",
                name:"foo", //命名路由,不是必需
                component:{template:"<div>foo组件的内容</div>"} 
           } 
       ] 
    });
    let vm = new Vue({
        el:"#app",
        data:{},
        router      
    })

    5、vue的表达式 {{ }},花括号只能用在innerHTML中,不能用在属性值中,属性值中用字符串,虽然是变量,但是依然可以解析。

    6、vue的methods中不能使用箭头函数,因为里面要用到this,如果使用了箭头函数,this指的就不是vue实例了,就是window对象了,这样子就乱了。但是methods中一般用的都是ES6的简写函数。methods:{ fn(){ return a } }

    7、html5 的新标签 template,了解下

    8、Vue.set( vm.items,indexOfItem,newValue )    等同于 vm.$set( vm.items,indexOfItem,newValue )

      vm.items.splice( indexOfItem, 1, newValue )

      以上两个修改数组的方法可以出发状态更新

    9、

    有时你可能需要为已有对象赋值多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

    Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })

    你应该这样做:

    vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
  • 相关阅读:
    反射
    jQuery之Dom操作
    Jquery学习开篇
    c#构造函数
    c#之委托
    DataX启动步骤解析
    JobContainer
    DataX 启动配置
    DataX源码分析(2)
    DataX源码分析(1)
  • 原文地址:https://www.cnblogs.com/smile-fanyin/p/10951354.html
Copyright © 2011-2022 走看看