Vue 学习笔记

Posted linghongfei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 学习笔记相关的知识,希望对你有一定的参考价值。

一、安装

1、基于nodeJs环境
  安装node设置node权限
2、基于node,利用淘宝npm镜像安装相关依赖
  在终端里直接输入:
  (1)、(2)、vue ,回车,若出现vue信息表示成功
 
3、安装全局vue-cli 脚手架,用于帮助搭建所需模版框架
  npm install -g vue-cli , 回车等待安装....
4、创建项目
  vue init webpack 项目名 ,回车
 
5、安装依赖
  cd 项目名 ,回车进入到文件夹
  cnpm install ,回车等待
  项目结构里多了一个 node_modules 文件夹(改文件里的内容就是之前安装的依赖)
 
6、测试环境是否搭建成功
  方法1: cnpm run dev (-port 新端口号/在config文件下的index文件下的prot字段修改为新端口号)
  方法2:在浏览器输入localhost:8080 (默认端口号8080)
 

二、Vue.js 起步

 
1、语法格式如下:
  var vm=new Vue({
    //选项
  })
  实例一:
  html:
    <div id="app"><p>site:{{site}};{{url}}</p><p>{{details}}</p></div>
  JS:
    var vm=new Vue({
      el:‘#app‘,
      data:{
        site:‘百度‘,
        url:‘www.baidu.com‘
      },
      methods:{
        details:function(){
          return this.site+"查询";
        }
      }
    })
   页面结果:
    site:百度;www.baidu.com
    百度查询
  实例二:
  HTML:
    <div id="app"><p>site:{{site}};url:{{url}}</p></div>
  JS:
      var data={site:"百度"url:"www.baidu.com"}
      var vm=new Vue({
        el:‘#app‘,
        data:data
      })
      document.write(vm.$data===data) //true
      document.write("<br>");
      document.writer(vm.$el===document.getElementById(‘app‘)) //true
  页面结果:
    site:百度;url:www.baidu.com
    true
    true
 
 

三、Vue.js 模版语法 

数据绑定最常见形式就是使用{{...}} (双大括号)的文本插值:
<div id="app"><p>{{message}}</p></div>
 
1、v-html 指令
  v-html指令用于输出html代码:
      <div id="app">
        <div v-html="message"></div>
      <div>
 
      new Vue({
        el:‘#app‘,
        data:{
          message:"Hello Vue!"
        }
      })
 
2、v-bind 指令
  属性中的值应用使用v-bind 指令
  .class1{color:red;background:#444;}
 
  <div id="app">
    <label for="r1"></label><input id="r1" type="checkbox" v-model="class1">
    <br>
    <div v-bind:class="{‘class1‘:class1}">文字文字</div>
  </div>
 
  new Vue({
      el:‘#app‘,
      data:{
        class1:false
      }
   });
 
3、表达式
  <div id="app">
    {{ 5+5 }} <br>
    {{ ok ? ‘YES‘ : ‘NO‘ }} <br>
    {{ message.split(‘‘).reverse().join(‘‘) }} <!--字符串反转-->
    <div v-bind:id="‘list-‘+id">文字信息</div>
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      ok:true,
      message:‘ABC‘,
      id:1
    }
  })
 
  10
  YES
  CBA
  文字信息
 
4、指令
  指令是带有v-前缀的特殊属性。
  指令用于在表达式的值改变时,将某些行为应用到DOM上。
  v-if
    <div id="app"><p v-if="seen">现在你看到我了</p></div>
 
    new Vue({
      el:‘#app‘,
      data:{
        seen:true
      }
    })
  这里的v-if指令将根据表达式seen的值(true或false)来决定是否插入p元素。
 
其他v-指令:
  <a v-bind:href="url">a链接</a> <a v-on:click="doSomething">a链接</a> v-on指令,用于监听DOM事件。
  <form v-on:submit.prevent="onSubmit"></form> 修饰符
5、双向数据绑定
  在input输入框中我们可以使用v-model指令来实现双向数据绑定:
  <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      message:‘ABC!‘
    }
  })
技术分享图片
 
6、过滤器
  Vue.js允许你自定义过滤器,被用作一些常见的文本格式化。由“管道符”指示  | 
  
技术分享图片
 
7、缩写
  v-bind 缩写:
    v-bind:href="url" //完整写法
    :href="url" //缩写
  v-on 缩写 :
    v-on:click="doSomething" //完整写法
    @click="doSomething" //缩写
 
 

四、条件语句和循环语句

1、v-if / v-else / v-else-if /v-show 条件语句
  <div id="app">
    <div v-if="type===‘A‘">A</div>
    <div v-else-if="type===‘B‘">B</div>
    <div v-else-if="type===C">C</div>
    <div v-else>Not A/B/C</div>
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      type:‘C‘
    }
  })
 
  <h1 v-show="ok">Hello!</h1>
 
2、v-for 循环语句
  <div id="app">
    <ol v-for="site in sites">
      <li>{{site.name}}</li>
    </ol>
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      sites:[
        {name:‘Ling‘},
        {name:‘Hone‘},
        {name:‘Fei‘}
      ]
    }
  })
 
  结果:
    1.Ling
    2.Hong
    3.Fei
 三个参数索引。
  <div id="app">
    <ul>
      <li v-for="(value,key,index) in object">
        {{index}}.{{key}}:{{value}}
      </li>
    </ul>
  </div>
 
  new Vue({
     el:‘#app‘,
     data:{
      object:{
        "name":"百度",
        "url":"www.baidu.com"
      }
     }
  })
 
  结果:
    1.name:百度
    2.url:www.baidu.com
 

五、Vue.js 计算属性

1、计算属性关键词:computed。
  <div id="app">
    <div>原始字符串:{{message}}</div>
    <div>计算后反转字符串:{{reversedMessage}}</div>
  </div>
 
  var vm=new Vue({
    el:‘#app‘,
    data:{
      message:‘ABC!‘
    },
    computed:{
      reversedMessage:function(){
        return this.message.split(‘‘).reverse().join(‘‘)
      }
    }
  })
 
  原始字符串:ABC!
  计算后反转字符串:!CBA
computed VS methods
  我们可以使用methods来替代computed,效果上两个都是一样的,但是computed是基于它的依赖缓存,只有相关依赖发生时才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。
  可以说computed性能会更好,但是如果你不希望缓存,可以使用methods属性。
 
2、computed setter
computed属性默认只有getter,不过在需要时你也可以提供一个setter:
  <div id="app">
    <p>{{site}}</p>
  </div>
 
  var vm Vue({
    el:‘#app‘,
    data:{
      name:‘Google‘,
      url:‘www.google.com‘
    },
    computed:{
      site:{
        get:function(){
          return this.name+‘ : ‘+this.url
        },
        set:function(newValue){
          var names=newValue.split(‘ ‘)
          this.name=names[0]
          this.url=names[names.length-1]
        }
      }
    }
  })
  vm.site=‘百度 www.baidu.com‘;
  document.wirte("name:"+vm.name);
  document.write("<br");
  document.write("url:"+vm.url);
   
结果:
    百度 : www.baidu.com
    name:百度
    url:www.baidu.com
 
 

 六、监听属性

我们可以通过 watch 来响应数据变化:
  <div id="app">
    千米<input type="text" v-model="kilometers"><br>
    米:<input type="text" v-model="meters">
   </div>
  <div id="info"></div>
 
  var vm=new Vue({
    el:‘#app‘,
    data:{
      kilometers:0,
      meters:0
    },
    watch:{
      kilomerts:function(val){
        this.kilomerts=val;
        this.meters=val*1000;
      },
      meters:function(val){
        this.kilomerts=val/1000;
        this.meters=val;
      }
    }
  });
  //$watch 是一个实例方法。
  vm.$watch(‘kilomerts‘,function(newValue,oldValue){
    document.getElementById(‘info‘).innerHTML="修改前值为:"+oldVlaue+",修改后值为:"+newValue;
  });
技术分享图片
 
 

 七、样式绑定

我们可以用v-bind 来设置样式属性。
v-bind:class设置一个对象,从而动态的切换class:
1、
  <div v-bind:class="{active:isActive}"></div>   
2、
  <div v-bind:class="{active:isActive,item:hasItem}"></div>
3、
  <div id="app"><p v-bind:class="objectClass"></p></div>
 
  new Vue({
    el:‘#app‘,
    data:{
      objectClass:{
        active:true,
        item:true
      }
    }
  })
4、数组语法
  <div v-bind:class="[isActive,hasItem]"></div>
5、还可以用三元表达式切换class
  <div v-bind:class="[isActive,hasItem?item:‘‘]"></div>
 
 

 八、事件处理

1、v-on
    <botton v-on:click="counter+=1">增加1</button>
    <p>这个按钮被点击了{{counter}}次</p>
 
    new Vue({
      el:‘#app‘,
      data:{
        counter:0
      }
    })
技术分享图片
技术分享图片
 
 

九、表单

1、input和textarea元素中使用v-model实现双向数据绑定:
  <div id="app">
    <p>input 元素:</p>
    <input v-model="message" placeholder="编辑我.....">
    <p>消息是:{{message}}</p>
 
    <p>textarea 元素:</p>
    <textarea v-model="message2" placeholder="编辑我....."></textarea>
    <p style="white-space:pre">{{message2}}</p>
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      message:‘Googel‘,
      message:‘谷歌 \r\n http://www.google.com‘
    }
  })
2、复选框
  <div id="app">
    <p>单个复选框</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
 
    <p>多个复选框</p>
    <input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
    <label for="baidu">百度</babel>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">谷歌</babel>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="google">淘宝</babel>
    <br>
    <span>{{checkedNames}}</span>
  </div>
 
  new Vue({
    el:‘#app‘,
    data:{
      checked:false,
      checkedNames:[]
    }
  })
 

十、组件

组件(Component)是Vue.js最强大的功能之一。
组件可以扩展HTML元素,封装可重用的代码。
 
注册一个全局组件语法格式如下:
trgName 为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:
 
1、全局组件
  注册一个简单的<aaa></aaa>,并使用它:
    <div id="app"><aaa></aaa></div>
 
    Veu.component(‘aaa‘,{
      template:‘<h1>自定义组件!</h1>‘
    })
    new Vue({el:‘#app‘})
2、局部组件
  var Child={
    template:‘<h1>自定义组件!</h1>‘
  }
  new Vue({
    el:‘#app‘,
    data:{
      ‘aaa‘:Child //<aaa>将只能在父模版可用
    }
  })
3、动态Prop
  <div id="app">
    <input v-model="parentMsg"/>
    <br>
    <child v-bind:message="parentMsg"></child>
  </div>
 
  Vue.component(‘child‘,{
    props:["message"],
    template:‘<span>{{message}}</span>‘
  })
  new Vue({
    el:‘#app‘,
    data:{
      parentMsg:‘父组件内容!‘
    }  
  })
技术分享图片
技术分享图片
 
4、自定义事件
  父组件是使用props传递数据给子组件,但如果子组件要把数据传递回去,9??需要使用自定义事件!
  我们可以使用v-on绑定自定义事件,每个Vue实例都实现了事件接口(Events interface),即:
  使用:$on(eventName)监听事件
    $emit(eventName)触发事件
 
  <div id="app">
    <p>{{total}}</p>
    <counter v-on:increment="increment"></counter>
    <counter v-on:increment="increment"></counter>
  </div>
 
  Vue.component(‘counter‘,{
    template:‘<button v-on:click="incrementHandler">{{counter}}</button>‘,
    data:function(){
      return {counter:0}
    },
    methods:{
      incrementHandler:function(){
        this.counter+=1
        this.$emit(‘increment‘)
      }
    }
  })
  new Vue({
    el:‘#app‘,
    data:{
      total:0
    },
    methods:{
      increment:function(){
        this.total+=1
      }
    }
  })
如果你想在某个组件的根元素上监听一个原生事件。可以使用.native 修饰 v-on .
技术分享图片
 
 

十一、自定义指令

1、页面载入时,input元素自动获取焦点
  <div id="app">
    <input v-focus>
  </div>
 
  Vue.directive(‘focus‘,{
    function(el){
      el.focus()
    }
  })
  new Vue({el:‘#app‘})
 
2、指令参数
  <div id="app">
    <div v-lhf="{color:‘red‘,text:‘凌红飞 ??‘}"></div>
  </div>
 
    Vue.directive(‘lhf‘,function(el,binding){
      el.innerHTML=binding.value.text
      el.style.backgroundColor=binding.value.color
    })
    new Vue({el:‘#app‘})
 

十二、路由

  <div id="app">
    <rooter-link to="/foo">Go To Foo</rooter-link>
    <rooter-link to="/bar">Go To Bar</rooter-link>
 
    <rooter-view></rooter-view> <!--路由渲染到这里-->
  </div>
 
    // 1、定义路由组件
    const Foo={template:‘<div>Hello Foo</div>‘}
    const Bar={template:‘<div>Hello Bar</div>‘}
 
    // 2、定义路由
    const routes=[
      {path:‘/foo‘,component:Foo},
      {path:‘/bar‘,component:Bar}
    ]
 
    // 3、创建router实例,然后传routers配置
    const router=new VueRouter({
      routes //(缩写)相当于 routes:routes
    })
 
    // 4、创建和挂载根实例。记得要通过router配置参数注入路由
    const app=new Vue({
      router
    }).$mount(‘#app‘)
技术分享图片
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

以上是关于Vue 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

Vue学习笔记目录

VUE学习笔记

vue-学习笔记

vue3学习笔记

VUE学习笔记分享

vue学习笔记之属性和方法