VUE基础

1.安装Vue

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。
注：node版本必须大于等于8.9
vue-cli3.x: npm install -g @vue/cli
vue-cli2.x: npm install -g @vue/cli-init

2.创建项目

vue init webpack my-project

注：安装依赖的时候，选择最后一个，就是自己安装cnpm install

 cd my-project
 npm start/npm run dev

3.工程目录

每个目录的作用

4.基础指令

Mustache：{{ 变量 }} 只能存在单行语句

    {{ "哈哈" }} //字符串
    {{ 20+1 }}  //可以计算
    {{ "ok" ? 'YES' : 'NO' }} //三目运算符
    {{ "hello".split('').reverse().join('')  }} //字符串的拼接
    {{ msg }} //msg可以由用户定义，类似于angular中的用法

v-once:只能渲染一次

<p v-once>{{ msg }}</p>   //类似于const，不可以修改

v-html:解析HTML结构

  <div v-html="hello"></div>
  // hello:"<h3>Hello H3</h3>",

v-bind:指令（解析属性中的对象），v-bind简写：(:)

 	<a v-bind:href="url">{{ url_name }}</a>
    <div :class="divClass">容器</div>
    <div :class="div2Class+'-1'">容器1</div>
    // url_name:"百度",
      url:"http://baidu.com",
      divClass:'isActive',
      div2Class:"list",

v-if:条件渲染

 <div v-if="flag">孙悟空</div>
 <div v-else>通臂猿猴</div>

v-show:条件渲染

  <div v-show="flag">真·三国无双</div>

5.v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.列表渲染v-for

相当于angular中的no-rapeat和react中的map
数组中：

 <ul>
      <li v-for="(item,index) in names" :key="index">{{ index }}-{{ item.name }}-{{ item.age }}</li>
 </ul>
   //  names:[
        {
          name:"iwen",
          age:20
        },
        {
          name:"ime",
          age:200
        },
        {
          name:"ice",
          age:2000
        }
      ]

对象中:

<ul>
  <li v-for="(value,key,index) in obj" :key="index">{{ value }}-{{ key }}-{{ index }}</li>
</ul>
   //   obj:{
        name:"iwen",
        age:20
      }

7.事件监听v-on与事件处理method函数 +数组中的变异与非变异方法

1.事件改变data数据，data数据改变会引起视图的变化：v-on监听事件+method函数中写逻辑

 <button @click="clickHandler('哈哈',$event)" type="button" name="button">按钮</button>
   //v-on可以简写为@
 methods:{
    clickHandler(data,$event){
      console.log(data);
      //event的打印结果为MouseClick
      console.log(event);
      // 改变data中的数据
      this.flag = !this.flag;
}

2.事件传递参数 $event：
3.数组更新检测

   <button @click="addHandler" type="button" name="button">添加</button>
	   //  methods:{
	   		addHandler(){
	      			console.log(this.helloArr.concat(["hello4","hello5"]));
	         }
	         }

最开始讲数组的时候：老师在讲一个方法的时候会说，返回一个原数组还是新数组

变异方法：改变原数组，则可以引起视图更新。 Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

非变异方法：例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。 不改变原数组，创建新数组，则无法引起视图更新。

8.计算属性：computed

computed:{
    getMsg(){
      // 如果数据没有被改变，则不会重新计算
      return this.msg.split('').reverse().join('')
    }
  }

计算属性缓存 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
从内存的角度考虑，计算属性的方案更合理。

9.Class与Style绑定

Class绑定：

   <div class="old" :class="{active:classDemo,'txt':classDemo}">
      css
    </div>
    
    <div :class="cssObj">
        test
    </div>
   
    <div :class="[isActive ?activeClass:''  ,errorClass]">
      test1
    </div>
    
    <!-- 对象中只能接受字符串active，数组中可以接受对象active1 -->
    <div class="old" :class="[{ helloC:classDemo} , isActive ? active+'12' : 'noactive']">
      应用中的样式
    </div>

Style绑定

<div :style="{ color:color,fontSize:'40px' }">
      style
</div>  

10.表单输入绑定v-modle+watch监听事件

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
1.注意：
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
2.多行文本：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

2.修饰符：
.lazy：回车后才显示<input v-model.lazy="msg" >
.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

 <input v-model.number="age" type="number">

.trim：能去掉前后的空格，不能去掉中间的空格<input v-model.trim="msg">

watch:监听事件：为了代码的简洁，更推荐使用计算属性

 // 实时监听数据变化
  watch:{
    inputmsg(data){
      if(data == "100"){
        this.inputmsg = "符合条件"
      }
    },
    myname(data){
      console.log(data);
    }
  },

11. 基本组建的创建与组件传递数据props

基本组建的创建
1.<template>中只能有一个根容器<div>
2.<script>文件中所有的初始化状态全部放入data中+props为组件传递数据+methods为方法属性+ watch实时监听+computed为计算属性
3.<style>中盛放样式

<!-- Add "scoped" attribute to limit CSS to this component only -->
//为了避免样式重复，scoped表示该样式只在当前组件中生效
<style lang="css" scoped>

4.在app中引入的步骤import导入–componens中注入–引用
组件传递数据props
子组件接收父组件的信息
父组件：

  <input v-model="parentText">
  <Learn @getMsg="getSonMsg" :title="parentText" />

子组件：

 <div class="container">
    新的组件:{{ title }}
  </div>
  // props:["title"]，

12.自定义事件向父组件传递数据：$emit(自定义事件)

子组件：

<div class="container">
    <input v-model="searchText">
    <button @click="sendMsg" type="button" name="button">传递数据</button>
  </div>
  //
methods:{
    sendMsg(){
      this.$emit("getMsg",this.searchText)
	  //两个参数为key和value，key为父级的自定义事件
    }
  }

父组件：

//注入后，引入子组件learn
     <Learn @getMsg="getSonMsg" :title="parentText" />
     //methods:{
        getSonMsg(data){
          this.demo = data
        }

13.组建加载与keepalive：切换时保持组件的状态

 <keep-alive>
      <component v-bind:is="currentComponent"></component>
      //使用 is 特性来切换不同的组件
 </keep-alive>
 //当在这些组件之间切换的时候，会想保持这些组件的状态，以避免反复重渲染导致的性能问题`。