vue笔记

使用淘宝镜像
- 地址：http://npm.taobao.org/
- 安装cnpm:
shell npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建vue的开发环境：

• 必须要安装nodejs
• 搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具

		npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）

• 创建项目 必须cd到对应的一个项目里面

  	vue init webpack vue-demo01
  
  	cd  vue-demo01 
  	
  	cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
  	
  	npm run dev
  
  

- 另一种创建项目的方式   （推荐）  ***
```	shell	
		vue init webpack-simple vuedemo02

		cd  vuedemo02
		
		cnpm install   /  npm install        
		
		npm run dev

现在开始创建一个.vue文件，在src下创建MyApp.vue

<template>
  <div id="myapp">
    <img src="./assets/logo.png" alt="">
    <h1>{{msg}}</h1>
    <h3>{{obj.name}}</h3>
    <hr>
    <ul>
      <li v-for="item in lists">{{item}}</li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                msg: 'welcome to myapp',
                obj:{
                    name:'张三'
                },
                lists:['1','2','A','B']
            }
        }
    }
</script>

<style scoped>

</style>

修改main.js

import Vue from 'vue'
import MyApp from './MyApp'

new Vue({
  el: '#app',
  render: h => h(MyApp)
})

添加删除小案例

<template>
  <div id="myapp">
    +add：<input v-model="todo" @keydown="addList($event)">
    <h3>正在进行</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="!v.checked">
        <input type="checkbox" v-model="v.checked"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
    <h3>完成</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="v.checked">
        <input type="checkbox" v-model="v.checked"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                }
            },
            delV(key){
                this.lists3.splice(key,1)//删除lists3的第key个，删除一个
            },
        }
    }
</script>

<style scoped>

</style>

刷新数据会丢失，接下来我们保存到本地浏览器中

<template>
  <div id="myapp">
    +add：<input v-model="todo" @keydown="addList($event)">
    <h3>正在进行</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="!v.checked">
        <input type="checkbox" v-model="v.checked" @change="addLocalStorage()"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
    <h3>完成</h3>
    <ul>
      <li v-for="(v,k) in lists3" v-if="v.checked">
        <input type="checkbox" v-model="v.checked" @change="addLocalStorage()"> {{v.title}} <button @click="delV(k)">-del</button>
      </li>
    </ul>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                    this.addLocalStorage()
                }
            },
            delV(key){
                this.lists3.splice(key,1)//删除lists3的第key个，删除一个
                this.addLocalStorage()
            },
            addLocalStorage(){
                localStorage.setItem('list',JSON.stringify(this.lists3))
            }
        },
        mounted() {//vue页面刷新就会执行的方法
            var list = JSON.parse(localStorage.getItem('list'));
            if(list){
                this.lists3 = list;
            }
        }
    }
</script>

<style scoped>

</style>

接下来考虑对localStorage操作进行封装：
storage.js:

// localStorage的操作封装
// src/model/storage.js

var storage = {
  set(key,value){
    localStorage.setItem(key,JSON.stringify(value))
  },
  get(key){
    return JSON.parse(localStorage.getItem(key))
  },
  remove(key){
    localStorage.removeItem(key)
  }
};

export default storage

引入storage

<script>
    import storage from './model/storage'
    export default {
        name: "MyApp",
        data() {
            return {
                todo:'',
                lists3:[],
            }
        },
        methods:{
            addList(e){
                if (e.keyCode===13){
                    this.lists3.push({
                        title:this.todo,
                        checked:false
                    });
                    this.todo = '';
                    this.addLocalStorage()
                }
            },
            delV(key){
                this.lists3.splice(key,1)//删除lists3的第key个，删除一个
                this.addLocalStorage()
            },
            addLocalStorage(){
                storage.set('list',this.lists3);
            }
        },
        mounted() {//vue页面刷新就会执行的方法
            var list = storage.get('list');
            if(list){
                this.lists3 = list;
            }
        }
    }
</script>

组件的使用

Home.vue
```html

引入组件
```html

<template>
  <div id="myapp">
      <v-home></v-home>
  </div>
</template>

<script>
    import home from './components/Home'
    export default {
        name: "MyApp",
        components:{
            'v-home':home
        }
    }
</script>

<style scoped>
  /*scoped 局部作用域*/
</style>

生命周期实例

<template>
  <div>
    <h3>home组件</h3>

  </div>
</template>

<script>
    export default {
        name: "home",
        beforeCreate() {
            console.log('实例刚刚被创建1')
        },
        created() {
            console.log('实例已经创建完成2')
        },
        beforeMount() {
            console.log('模板编译之前3')
        },
        mounted() {  //请求数据，操作dom可在这进行
            console.log('模板编译完成4')
        },
        beforeUpdate() {
            console.log('数据更新之前')
        },
        updated() {
            console.log('数据更新完毕')
        },
        beforeDestroy() {//页面销毁前报错数据
            console.log('实例销毁之前')
        },
        destroyed() {
            console.log('实例销毁完成')
        }
    }
</script>

<style scoped>

</style>

<template>
  <div id="myapp">
      <v-home v-if="flag"></v-home>
      {{msg}}
      <button @click="changeMsg()">change</button>
      <br>
      <button @click="flag=!flag">挂载组件/销毁组件</button>
  </div>
</template>

<script>
    import home from './components/Home'
    export default {
        name: "MyApp",
        data(){
            return{
                msg:'改变之前',
                flag:false
            }
        },
        methods:{
            changeMsg(){
                this.msg = '改变之后'
            }
        },
        components:{
            'v-home':home
        },
        beforeCreate() {
            console.log('实例刚刚被创建1')
        },
        created() {
            console.log('实例已经创建完成2')
        },
        beforeMount() {
            console.log('模板编译之前3')
        },
        mounted() {  //请求数据，操作dom可在这进行
            console.log('模板编译完成4')
        },
        beforeUpdate() {
            console.log('数据更新之前')
        },
        updated() {
            console.log('数据更新完毕')
        },
        beforeDestroy() {//页面销毁前报错数据
            console.log('实例销毁之前')
        },
        destroyed() {
            console.log('实例销毁完成')
        }
    }
</script>

<style scoped>
  /*scoped 局部作用域*/
</style>

初始化项目

vue init webpack vue-demo

ESLint ? N 是否需要 js 语法检测

进入 cd vue-demo

执行

npm install

接下来执行

npm run dev

，默认浏览器会自动打开

打包发布：

npm run build

npm install -g serve

serve dist

基础指令：

{{}}

v-one: 只渲染一次

v-html:解析HTML结构

v-bind: => 简写 ：

v-if :是惰性的

v-else

v-show:是否显示或隐藏，只是通过操作css

v-for (k,i) (v,k,i) :key

v-on: => 简写 @

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

变异数组：

• push()
• pop()
• shift()
• unshift()前
• splice()
• sort()
• reverse()
• concat 数组合并

数组调用变异方法：example1.items.push({ message: 'Baz' }) 。

替换数组：

例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。

components： 组件

computed() 计算属性

methods: 方法

Class与Style绑定 class="[{}]" 对象中可以接受字符串，数组中接受对象

data: data函数,初始化数据 data中的a,b,c 获取常用方法: const{ a,b,c} = this

props:[] 通过 Prop 向子组件传递数据
调用内建的 [**(emit** 方法]并传入事件的名字，来向父级组件触发一个事件： 使用 `)emit` 的第二个参数来提供这个值：

<template>
  <div>
    父组件: {{mon}}  <!--子传父-->
    <child @money="getMoney" title="一个小目标"/>
  </div>
</template>

<script>
  import child from './child'

  export default {
    name: "parent",
    data() {
      return {
        mon: "",
      }
    },
    components: {
      child,
    },
    methods: {
      getMoney(data) {   // 子传父
        this.mon = data;
      }
    }
  }
</script>

<style scoped>

</style>

<template>
  <div>
    子组件:
    {{title}}   <!--父传子-->
    <button @click="sendMoney">点击</button>  <!--子传父-->
  </div>
</template>

<script>
  export default {
    name: "child",
    data() {
      return {}
    },
    props: ["title"],//父传子
    methods: {
      sendMoney() {   //子传父
        this.$emit("money", "先整一个亿？")
      }
    }
  }
</script>

<style scoped>

</style>

类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

// 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },

加载组件

<component v-bind:is="currentTabComponent"></component>

keep-alive

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

访问根实例：

在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：

// Vue 根实例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()

访问子组件实例或子元素：

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

插槽：

<模板1>

​ you profile

</模板1>

在模板1的会被 you profile替换

1.基础插槽
2.具名插槽
3.编译作用域
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
4.作用域插槽（数据传递）
在 2.5.0+，slot-scope 不再限制在