Vue概念

环境搭建

官网：https://cn.vuejs.org

安装：

1. 通过vue-cli 脚手架建立项目
   npm install -g vue-cli
2. 新建基于webpack环境的项目
   vue init webpack project
   cd project
   npm install
   npm run dev (package.json 中)

项目结构：

1. index.html 项目根试图
2. static 静态文件服务，直接可以在浏览器中找到
3. config服务器的配置文件（自动打开浏览器等）
4. bulid webpack配置文件 打包等操作设置在里面

实例

• 入口文件 main.js 类似于react 这个文件中绑定跟元素视图 以及使用了哪些插件都在这里
  单界面元素 都会绑定入口视图

new Vue({
  
  el: '#app',
  router,
  
   components: { App },
   
   template: '' 
})

• 一个vue文件的模板

Mustache模板

表现形式：{{变量}}
当行：{{1>2?aaa:bbb}}
注视： 只能存在单行语句，并且不能作用在html熟悉上

Vue的基本指令：

v-html 渲染文本 如果文本中带html标签 会解析后显示
v-text 渲染文本

v-bind 哪个属性是活动的，就绑定
动态样式
data:
class1:"class1",

style{
.class:xxxxx
}
v-bind:class 的简写 :class

条件渲染

1. v-if
   

   
   data: show:true
   

   
   注意：同样是标签是不能相互嵌套的，除了div等，否则是兄弟关系！！
   template 是一个承载容器，不会被渲染成组件，！！！

2. v-show 没有else了，

   xxx

   
   注视：相对于if，v-show 总是会被渲染

3. v-for 列表渲染

dataArry:[1,2,3,]

    



v-for="(item,index) in dataArry" index是下标
:key="index" 绑定key,否则会有警告

事件监听

v-on

//直接操作数据

data(){
    return{
        num:1
    }
},
methods:{
    add(){
       this.num+=1
       //this 是当前组件
    }
}
备注：template中只能存在一个根目录

给事件传递参数：add("AAA");
add(parms,event){
    //其中event是点击的对象，忽略
},

事件修饰符

组织冒泡，只能点击一次等
v-on:click.once
按键修饰符
.enter只会在enter时候触发
事件缩写
@keyup.enter="add"

数组检测更新

数据的变化会改变视图的变化
在数组中有些方法可以改变视图，有些确不可以！！
可以的：push／pop／shift等
不可以：concat
注视：可以的是因为改变原数组，所以才能改变

计算属性和观察者

1. 计算属性
   存在意义：一个数据的变化数据，在不同地方显示，那么不在每个里面计算，而是采用计算属性实现

computed:{
    msg(){
        return this.num+1
    }
}
{{msg}}

备注： 计算属性是基于原数据的

跟方法比较：计算属性会有缓存，方法不行，会重复调用，只有当数据变化的时候，计算属性才会相应的改变，否则会在缓存拿

输入绑定

{{msg}}
双向的数据绑定哦！！！！

watch:{
//监听数据的改变，给提示用途等
msg:function(data){
//方法名msg和绑定的数据要一样才能监听
console.log(data)
}
}
修饰符：v-model.lazy="msg" 失去焦点的时候显示数据

组件：

1. 单文件的组成
   三个部分：

• template 只能存在一个根元素
• script
• style scoped属性，样式只在当前的组件生效

组件的数据传递

//父
import Son from './son'

script:
//组件诸如
components:{
Son
}

数据传递：
父--子 props

在子的scrpit中
props:[title],

使用{{title}}
活数据
:title
设定传来的数据的类型
props:{
title:String,
num:Number,
//多种数据类型
title:[String,Number],
//必选项
title:{
type:String
required:true
}
}
.........等等...............................
子---->父:
通过自定义事件 父子都需要哦
子：

}
}

父：
事件绑定在子组件上

methods:{
getMsg(data){
//这时候就能获取到子组件传递来的数据了
}
}

//父子之间的关系： 父组件将数据传递给子，子处理好后 返回给老头子

插槽：
将父组件的数据直接显示在子组件里面，那么将数据直接插入到子
父：

    
 这是插入的数据 

子：
======
 这是插入的数据 

注意：子父组件都可以设置其样式

为插槽命名

 父
xxx
xx
子

插槽传递数据，子穿给父，父决定其样式

{{key.text}}

缓存 keep-alive

切换的组件（动态组件） 数据不重新的加载，保持不变

1. 动态组件
   
   data:
   current:组件名字，通过fun变换data 从而切换组件视图

2. 切换不重新加载，用keep-alive 包裹
   
   
   
   在什么情况下使用缓存，这里注意哦

动画效果

直接将元素套在transition里面,并且指定name

name的class的过度类名
v-enter: 进入开始
v-enter-active:执行过程中
v-enter-to:结束动画
v-leave:离开开始
v-leave-active 离开过程
v-leave-to:离开结束

可以配合第三方动画库

//从过0到1的过程 
.fade-enter-active{
   transition: opacity .5s;
}
// 从1到0的过程

自定义指令

1. 通过全局
2. 通过局部

eg：自动获取焦点

• 全局：
  在根元素绑定

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时…….其中的el代表所要使用的元素
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

这样全局都可以使用：

2. 局部使用

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
  其他的自定义······
}

过滤器-->数据的处理（数据加东西 剪东西啥的）

filters:{
moneyChange(value){
if(typeOf value ==="number"){
return "¥"+value
}
return value
}
}

使用：

{{money|moneyChange}}

当money是数字的时候显示¥money 当不是数字直接显示自己本身