Vue.js

vue.js安装

先安装node和npm 查看使用node -v npm -v
安装vue-cli sudo npm install -g vue-cli
查看是否安装成功 vue
在想要安装的地方安装项目 vue init webpack 项目名
进入项目运行 cd 项目名 | npm run dev

? Project name test 
? Project description 我的第一个项目
? Author caijunyu <vshiron@163.com>
? Vue build standalone
? Install vue-router? Yes （路由）
? Use ESLint to lint your code? No （语法检查）
? Setup unit tests with Karma + Mocha? Yes （单元测试）
? Setup e2e tests with Nightwatch? (Y/n) y 

vue.js基础

MVVM框架 双向的数据绑定

• M-model 数据层
• V-view 视图层
• VM-view model 视图模块 - vue

使用小胡子语法来实现最简单的数据展示
template模版，可以在创建的组件和实例中添加html模版

• data:{} 用来存放数据
• methods:{} 用来存放方法 不会有缓存
• computed:{} 计算方法 根据依赖有缓存 setter getter(自带)
• watch:{} 监听方法
• filters:{} 过滤器方法
• directives 指令
• components:{} 创建局部 存放导入的组件
• component 创建去全局组件, 组件名字最好全小写,并且带一个-连字符

组件中的data必须是函数

方法, 计算属性和监听的区别:

• 方法不会有缓存, 使用一次运行一次
• 计算属性存在缓存, 当他所依赖的值没有发生变化的时候会使用上一次的结果, 只有发生变化的时候才会更新
• 监听,

vue中的指令

• v-text 和差值表达式的的使用结果一样 v-text=“变量名”. 是变量里面的内容会覆盖原有标签上的内容

• v-html
  也可以输出变量中的内容，加粗显示 可以在数据data中定义一个html内容然后使用这个标签来输出
  <div v-html="p"></div> data:{p:'<h1>hello</h1>'}

• v-show
  使用v-show这个指令也可以实现数据的显示变化，她在不显示的时候只是隐藏了这个，而if会直接删除;
  频繁的需要隐藏和显示推荐使用v-show, 只显示一次,或者可能很少看到的使用v-if

• v-if v-else
  v-If循环：if后面的值为true或者false。

• v-for
  这个可以有三个参数，value key index
  <li v-for="(value,key,index) in(of) object">{{index索引}}.{{key属性名}}:{{value值}}</li>
  当给v-for循环一个对象的时候，会直接输出对象中的各项属性值。v-for="(val, key) in user"

• v-on:
  也可以简写成 @ v-on:click="fn" 其中的this指向的是实例
  如果不传入参数则不需要写括号会自动传入事件源event，调用的方法会有一个event的形参 如果加了括号需要手动传入$event属性，后面在加上要传入的其他参数

• v-bind: 可以缩写为 :

• v-model
  通过绑定变量，本身发生变化的时候，绑定的变量也会发生变化 主要是用在表单组件上
  修饰符:v-model.修饰符 .lazy(转变为change，输入完成之后才会更新页面) .number(数字) .trim(空格)

• v-once 你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
• v-cloak 解决闪烁问题被他包含的内容将在页面加载完成之后显示 [v-cloak] { display: none }

修饰符

事件修饰符

.stop 阻止单机事件继续传播 事件冒泡 事件从下往上执行 意思就是只触发自身的点击事件
.prevent 提交事件不再重载页面,阻止默认行为
.capture 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 事件捕获 就是优先执行
.self 只当在 event.target 是当前元素自身时触发处理函数 自会阻止自己的冒泡事件
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发

按键修饰符

.enter
.tab
.delete(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<input v-on:keyup.13="submit"> 使用键盘码
你还可以通过全局 Vue.config.keyCodes.f1 = 112 对象自定义按键修饰符别名

系统修饰符

.ctrl
.alt
.shift
.meta
<input @keyup.alt.67="clear"> ait+c

鼠标按键修饰符

.left
.right
.middle

过滤器

使用管道符 | 来过滤 可以用在双花括号插值和 v-bind 表达式
其中的this指向的是window
filters:{} 过滤方法写在这个里 方法的参数方法名(data,参数,参数){ 可以使用data }
当有多个根实例的时候，如果想要公用一个过滤器，可以创建一个根过滤器 Vue.filter('名',(data)=>{方法体}); 要放在页面的顶部
var date = new Date( 一个字符串 );
var y = date.getMonth() + 1;
var d = date.getDate();
return ${y}+${d} 就会根据给定的字符串,得到特定的时间, 返回的需要带上引号

生命周期钩子

• beforeCreate 在实例初始化之后，实例创建完成之前,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
• created 在实例创建完成后被立即调用 专门用来发送ajax的方法 他的this指向实例本身
• beforMount 在挂载开始之前被调用, 模版已经初始化完成在内存中
• mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 dom创建
• beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前
• updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
• activated keep-alive 组件激活时调用
• deactivated keep-alive 组件停用时调用
• beforeDestroy 实例销毁之前调用
• destroyed 实例销毁之后调用

使用v-bind指令绑定样式

使用v-bind绑定class样式，可以直接绑定到一个样式，也可以直接绑定到两个样式；除此之外，可以吧可以直接把他绑定到一个组里，在data里面直接定义这个组，组中的属性为要绑定的class名。还可以直接给它绑定一个计算属性的方法，最后也可以为他绑定一个数组，数组中的值是两个变量，两个变量在data中以activeClass: 'active',的形式来定义一个新的class。
绑定样式：

• :class="['name', 'name']" 直接绑定
• :class="[ isFlag?'active':'']" 三元表达式
• :class="[{'active': isactive}]" 内嵌对象
• <div v-bind:class="{ active: isActive, this: true }"></div> ——外联样式
  给这个div绑定一个class，名字为active，当后面的值为true的时候就会绑定这个class，从而添加样式。
  也可以为class绑定一个数组，其中的值对应的是data中的属性值
• <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>---内联样式
• 通过style绑定内联样式 <div v-bind:style="styleObject">菜鸟教程</div>——绑定样式对象
  在对象中写好样式，定义在data中。styleObject: { color: 'green', fontSize: '30px'}
• <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>—— 绑定样式数组
  每一个数组的元素都定义在data中， baseStyles: { color: 'green',fontSize: '30px'}
  V-bing:class=“{ class名字 : true/false}”
  V-bind :style=“{ 属性名字：属性值}"

计算属性 computed 不是方法

• 方法不会有缓存 computed会根据依赖的属性进行缓存
• 由两部分组成get和set(不能只写set)
• 根据一个值给他设定一个计算属性，当这个值变化的时候执行对应的改变
• 默认调用get方法，必须要有return，不支持异步
• 另一个值(){}

watch 监听一个值

• watch的属性民要和观察的人的名字一致 a(新值,旧值){}
• 只有值变化的时候才触发 支持异步

vue.js组件

父子组件之间的传值
父组件往子组件中传值的时候是通过属性来传值的；存放在子组件的poro中。
子组件通过事件触发的方式来传值，创建一个触发事件this.$emit(“delete”)；
当给一个组件传递一个对象的时候，对象中包含很多的属性，你可以直接使用<blog-post v-bind="post"></blog-post>直接绑定这个对象，然后对象中的属性就会自动全部绑定
在prop中可以验证一个值的类型，这个时候prop后面跟着的是一个对象required: true表示是必填字段

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

创建全局组件

全局注册的组件可以用在其被注册之后的任何(通过new Vue)新创建的Vue根实例，也包括其组件树中的所有子组件的模板中
组件命名规则:使用的时候最好使用连字符
不使用驼峰命名则直接使用
驼峰命名在使用的时候,要用连字符隔开

Vue.component（“组件名”,{  //创建全局组件
data: function(){      // 一个组件的data必须是一个函数
    return {
        数据
    }
},
props : ['content’],     //=> 用来存放父组件传回来的值
template: "<li>{{content}}</li>”,  //=> 创建的组件模版
}) 

Vue.component("mycompenent",{
 props:{
  propA:Number, //一种数据类型要求
  propB:[Number,String], //多种数据类型要求
  propC:{   //数据类型，是否必须，默认值
   type:Number,
   required:true,
   default:18
  },
  propD:{
   default:function(){ //自定义默认值函数
     return {message:'hello'};
   }
  },
  propE:{
   validator:function(args){  //自定义验证函数
    return args>10;
   }
  }
 },
 data:function(){
  return {
   count:0
  }
 },
 template:'<div>....</div>'
})

 var com = Vue.extend({
    template: '<>'})
 Vue.component('mycom',com);
  <mycom></mycom>  使用

创建局部组件

。。。

var TodoItem = {  //=> 创建局部组件
props: ['content','index’],   //=> 存放值
template: "<li @click='handItemClick'>{{content}}</li>”,//=> 模版
methods: {        //=> 方法
    handItemClick: function(){
                this.$emit("delete",this.index);
                     }
    }
} 
//=> 局部组件创建成功之后，要在根实例中使用需要在实例中注册一下
components:{ 'a-b':Ab(局部组件名) }
//=> 也可以在创建的其他子组件中使用，但是需要导入注册
import ComponentA from './ComponentA.vue' //=> 导入
export default {
  components: {
    ComponentA     //=> 注册
  },
  // ...
}

Prop

类型：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 一般都是这样
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
这样可以为每一个props的值设置指定的类型

自定义命令

    创建自定义的命令
<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
<script>      //-----------创建全局命令
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 第一次绑定到元素的时候
  bind: function(el){};  
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  // 所在组件更新时
  update: function(el) {},
   // 指令所在的组件的VNode以及其子VNode 全部更新后调用.
  componentUpdate : function(el) {}
  // 指令和元素解绑的时候调用,只调用一次
  unbind:  function (el) {}
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
<script>            ---------创建局部命令
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

vue.js动画 *

需要先使用transition包起来要有动画的内容
transition中有多个元素的时候 需要给他们添加一个key值来区分，在他的属性中可以定义一个mode=“out-in”表示先出后进 mode=“in-out”先进后出
tag 属性用来把这个动画渲染成什么元素 tag="div"

<style>   原始动画
    .v-enter,v-leave-to { 动画的移动 }
    .v-enter-active,.v-leave-active { 过渡效果 }
    .v-move {移动的效果}  这个主要是用来解决当一个元素隐藏的时候,其他元素也会变动时的效果
    
    .fade-enter-active,
    .fade-leave-active {
         transition: opacity 1s;
    }
    .fade-enter,
    .fade-leave-to {
          opacity: 0;
    }
</style>   添加appear的时候表示加载完成的时候也是用动画
<transition appear name="a" mode="out-in" >   //=> 当有多个div需要添加动画的时候需要区分开来使用name
    <div>               //=> 添加name之后就会自动寻找匹配的样式 out-in表示动画先出后进
</transition>

+++==>> 引用animated.css
首先安装animated.css, 然后在main.js中引入, import animated from 'animated.css' Vue.vue(animated),在界面就可以直接使用.
    <transition
      appear
      name="fade"
      enter-active-class="animated zoomInLeft"
      leave-active-class="animated zoomOutRight"
    >
      <div v-if="show">hello worlds</div>
    </transition>

====》 动画钩子
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"

可以把数据存放到json文件中，在控制台中输入JSON.stringify(要转换的数据)转换为json格式

操作dom

<h2 ref='foo'>我是ref的值</h2>要获取这个h2元素的文本，需要给此元素添加ref属性，并赋予名字
console.log(this.$refs.foo.innerHTML') 值就是要获取的内容
this.$refs.foo.innerHTML=’我是新值‘ 改变他的值