vue.js基础笔记

为了学习webpack找的视频教材，没想到把vue.js学了，还没感觉到跟angular的很多差别，可能是因为我还没深入到源码吧。

1.安装方式

             引入vue.js有两种方式，一种直接使用<script>引入，另一种在webpack的环境下，使用es6的引入模块进行引入。

import Vue from 'vue';
关于包的查找规则：
1.找项目根目录中有没有node_modules的文件夹。
2.在node_modules中，根据包名，找对应的vue文件夹，
3.在一个文件夹中，找一个叫做package.json的包配置文件.
4.在pack.json文件夹中，查找一个main属性[指定了这个包在被加载时候,的入口文件]
 

2.属性事件绑定指令

v-bind:绑定属性的指令，平常使用中可以去掉v-bind，
例如 :title="mytitle"，
     :class="{thin:true,italic:true}";
     :style="{color:'red'}";


v-on:事件绑定指令，v-on:click="show()",@可以代替v-on;

     事件修饰符：stop阻止冒泡；@click.stop="show()"

                prevent:阻止默认事件;@click.prevent="show()";
v-model:双向数据绑定

v-for:key,用来标识循环中唯一的标识。

v-if:会去除dom元素,v-show是隐藏

3.过滤器和指令

1.定义全局过滤器

{{msg|msgFormat('ar','arg2')}}
 Vue.filter('msgFormat',function(msg,ar,arg2){
   // 第一个参数是固定的，默认为传过来的值
   return 
})

私有过滤器定义到相应的Vue对象中，以下同理。

2.自定义按键修饰符
配置：Vue.config.keyCode.f2=113
使用：@keyup.f2="method()"

3.自定义全局指令

Vue.directive('focus',{
bind:function(el){
// 每当指令绑定到元素的时候,会立即执行这个bind函数,只执行一次。
// 第一次参数,永远是el，表示被绑定了指令的那个元素，这个el参数,是一个原声的js对象。
},
inserted:function(el){// 插入到DOM中的时候},
updated:function(el){// 更新的时候}
})

4.组件化和模块化

   模块化：从代码逻辑的角度进行分割。

   组件化：从UI界面的角度进行分割。

5.创建组件

1.使用Vue.extend来创建全局的Vue组件
var com1=Vue.extend({template:''});
  使用Vue.Component('组件的名称','创建处理的组件模板对象')：
   Vue.Component('myCom1',com1);
直接在html中使用<myCom1></myCom1>就行.


2.简化1
Vue.component('my',{
template:'',
// 每一个组件之间变量私有
data:function(){
return 一个对象
}
}),
使用方式和1一样。

3.使用方法不一样

Vue.component('my',{template:'#tmp1'}),
使用方法为
<template id="tmp1"></template>,也可以使用标签。


4.私有组件，也称为父子组件
var vm2=new Vue({
el:'#app'
// 私有过滤器
 filters:{},
// 私有指令
directives:{},
 components:
 {// 私有组件属性
  login:// 标签,只能放在当前el中
  {
   template:'#tmp1'
  }

 }
})
  

 6.组件切换

1.v-if和v-else结合变量
2.component占位符

例如：
  <a href="" @click.prevent="comName='login'">登陆</a>
  <a href=""  @click.prevnet="comName='register'">注册</a>
 // component是一个占位符，：is属性可以用来指定要展示的组件的名称
  <component :is="cotName"></component>

7.父子组件传值

   1.父向子传值 ：通过属性绑定的方式                  

例如子组件中<com v-bind:parentmsg:"父组件变量"></com>


子组件在如果需要使用此数据，需要声明该变量

new Vue({

Component:{
  props:['parentmsg']// 定义传过来的数据，angular中用的@Input()属性绑定值
}
})

2.子调用父组件的方法：通过事件绑定 

new Vue({

Component:{
  props:['parentmsg']// 定义传过来的数据，angular中用的@Input()属性绑定值，
  methods:{
  myclick(){
   this.$emit('func123',123)
}
}
}
})

子组件定义方法 ,show为父组件的方法
<com2  @func="show"></com2>

angular中用的@onput()

8.路由 

前端路由：对于单页面的应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换
<a href="#/login">登陆</a>
或者
<router-link to='/login'></router-link>
// 路由占位符，路由匹配到组件，将会再此展示
<router-view></router-view>



var routerObj=new VueRouter({
 routes:[
  {path:'/login',component:login},
  {}

 ]
})


路由匹配
new Vue({

router:routerObj// 用来监听url的变化
})

9.watch,computed,methods的对比 

var  vm=new Vue({
       methods:{
// 业务逻辑处理
       },
       computed:{

        // 本质上是一个方法，但对于computed来说，是一个属性，所以不能使用()的方式来调用
         // 实时监听，方法体内的数据一旦变化，此属性将重新计算，如果数据不变，则不会更改数据。
       'fullname':function(){
         return 
        }
       
       }

       watch：{
       // mehods和computed的结合体
      }
})