环境搭建

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

安装：

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

项目结构：

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

实例

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

new Vue({
  <!--绑定一个元素-->
  el: '#app',
  router,
  <!--组件注入-->
   components: { App },
   <!--模板-->
   template: '<App/>' 
})

一个vue文件的模板

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <span>{{hello}}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
        hello:"你好 vue"
    }  
  },
  components:{
      //本组件中用到的组件
  }
}
</script>

<style scoped>
#app {
    
}
</style>

Mustache模板

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

Vue的基本指令：

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

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

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

条件渲染

v-if
<p v-if="show">
data: show:true
<p v-else>
注意：同样是标签是不能相互嵌套的，除了div等，否则是兄弟关系！！
template 是一个承载容器，不会被渲染成组件，！！！
v-show 没有else了，<p v-show>xxx</p>
注视：相对于if，v-show 总是会被渲染
v-for 列表渲染

dataArry:[1,2,3,]
<ul>
    <li v-for=" item in dataArry"></li>
</ul>

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
按键修饰符
<input type="text" v-on:keyup.enter="add"> .enter只会在enter时候触发
事件缩写
@keyup.enter="add"

数组检测更新

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

计算属性和观察者

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


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

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

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

输入绑定

<input v-model="msg">
{{msg}}
双向的数据绑定哦！！！！

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

组件：

单文件的组成
三个部分：

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

组件的数据传递

//父
import Son from './son'
<Son/>
script:
//组件诸如
components:{
Son
}

数据传递：
父--子 props
<Son title="父亲的数据"/>
在子的scrpit中
props:[title],

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

methods:{
sendMsg(enent){
这里有两个参数，第一个参数是key，这个key就是父组件中的所自定义的事件第二个参数是所要传递的参数
this.$emit("key",this.msg)
}
}

父：
事件绑定在子组件上
<Child @key = "getMsg"/>
methods:{
getMsg(data){
//这时候就能获取到子组件传递来的数据了
}
}

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

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

<Child>
    <p> 这是插入的数据 </p>
</Child>
子：<slot></slot>
======
<p> 这是插入的数据 </p>

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

为插槽命名

 父
<p slot="s1">xxx</p>
<p slot="s2">xx</p>
子
<slot name="s1"/>

插槽传递数据，子穿给父，父决定其样式
<slot name="s1" text="子的数据"／>
<Child>
<p slot="s1" slot-scope="key"/>{{key.text}}</p>
</Child>

缓存 keep-alive

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

动态组件
<component :is="currentView"></component>
data:
current:组件名字，通过fun变换data 从而切换组件视图
切换不重新加载，用keep-alive 包裹
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
在什么情况下使用缓存，这里注意哦

动画效果

直接将元素套在transition里面,并且指定name
<transition name="fade">
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的过程

自定义指令

通过全局
通过局部

eg：自动获取焦点

全局：
在根元素绑定

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

这样全局都可以使用：
<input v-focus>

局部使用

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

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

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

使用：<p>{{money|moneyChange}}</p>
当money是数字的时候显示¥money 当不是数字直接显示自己本身

Vue概念

Vue概念

环境搭建

项目结构：

实例

Mustache模板

Vue的基本指令：

条件渲染

事件监听

事件修饰符

数组检测更新

计算属性和观察者

输入绑定

组件：

组件的数据传递

缓存 keep-alive

动画效果

自定义指令

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

Vue概念

环境搭建

项目结构：

实例

Mustache模板

Vue的基本指令：

条件渲染

事件监听

事件修饰符

数组检测更新

计算属性和观察者

输入绑定

组件：

组件的数据传递

缓存 keep-alive

动画效果

自定义指令

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

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