前端VUE笔记

           vue

杂记 脚手架

console.log()控制台打印输出和alert()差不多   

!important设置Css优先级最高

display: flex; <div style=" flex: 1;"/></div>设置水平状态下div占的宽度比

<style scoped>  设置作用域 只限于目前页面

插值

<template>写法
       <div v-once>{{su}}</div> 当标签中带v-once 时插值处的内容不会更新，但会影响其                             

他节点上的数据绑定
      <input type="button" @click="insert" value="点击">

computed:计算属性 

<template>写法 <div>age+a={{addToA}}</div>

在methods: 中 computed:{addToA:function(){   return this.age+this.a  },

data: 中 a:0,

ref数据绑定

<template> <input type="text"  ref="name"></input>
 <input type="button" @click="insert">

methods:{  insert:function () { this.b=this.$refs.name.value; }},

this.$refs.name.value;获取ref名为name的value值

    data:  function(){return{  n:'',}}}

引图片

<template> <img class="images" :src="imgSrc">

 data: imgSrc:"图片路径",

For循环 循环数组

1 <template> 页面中循环显示数组的方法

<li v-for="(item , index) in brands[brand].category[cate].skill"
    @click="chooseCategories(index)" index 要查询的数组下标

brands[brand] 数组[下标].skill数组内字段
   :class="[skillsIndex===index?'selectedShow choiceBox':'choiceBox']"
>
    {{item.skills}} 显示数组内的字段

</li>

 

2  methods:中用For循环数组内数据

for(let i in this.brands){ i是下标
    console.log(this.brands[this.brand]);
}

全局组件

  在main页面设置

Import User from ‘./components/Users’ //导包 Users是一个vue页面

Vue.component(“users”,Users) //全局注册组件  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

指令

V-text

 更新元素的textContent。如果要更新部分的textContent，需要使用{{ Mustache }} 插值。

<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>

V-html

与V-text一样 只是V-text是设置文本的 V-html渲染css的

<div v-html="html"></div>     data 里面的 html:'<h1>教程</h1>',

v-if  判断文本中属性是否为确定的值，如果是就显示后面的属性，如不不是就不显示

<h1 v-if="ok">Hello</h1>

data (){ return {ok:true,}}

默认判断ok 属性是否为true 是就显示Hello 不是就显示为空

v-show

也是根据条件来展示元素的，和v-if的功能类似。但是v-show中如果条件为false就生成代码不显示。而v-if如果条件为false,就直接不生成代码。

 

v-if与 v-else   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

 <div v-if="Math.random()>0.5">
    sorry
  </div>
  <div v-else>
    not sorry
  </div>
</div>

 

判断Math.random()>0.5 是的话就输出sorry 不是就输出 not sorry

v-else-if

<div v-if="show === 'ab'">ab</div>
<div v-else-if="show === 'b'">b</div>
<div v-else-if="show === 'c'">c</div>
<div v-else>abcde</div>

 

data (){
   return {
        show:'cb',
  }

判断字符串是否为ad 是否为b 是否为c 否则显示abcde

 

 

 

 

 

 

V-for

<template>

<div>
      <ul>
        <li v-for="todo in tods "> 或者"(todo i) in tods " 键是i 值是todo
          {{todo.txt}}
        </li>
      </ul>
    </div>
</template>

 

<script>

data (){
   return {

tods:[
  {txt:'你好'},
  {txt:'数组'},
  {txt:'函数'},
]

</script>

循环获取 tods里的值

或者

  <li v-for="todo in tods ">
          获取 id {{user.id}}  获取姓名{{user.name}}

 </li>

用v-for 迭代数字

 <ul>
    <li v-for="todo in 10 ">
      这是第{{todo}}循环
    </li>
</ul>

 

V-on 事件<a v-on:click="doThis"></a> 缩写 <a @click="doThis"></a>

事件修饰符v-on:click

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

2 <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

3<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> 4<!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

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

6 <!-- 添加事件监听器时使用事件捕获模式 --> 

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> 

<div v-on:click.capture="doThis">...</div> 

7 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

 <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

提示：v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键值修饰符@keyup

<template> <div>{{n}}</div> <input type="text"  ref="name" @keyup="insert"></input>

v-on:keyup跟随键盘输入调用insert方法

methods: { insert:function () { this.n=this.$refs.name.value;}},

data:  function(){ return{ n:'', } }}

如果v-on:keyup.enter 这样写只有按回车键才能触发里面的方法

 

v-on:input 标签 跟随键盘输入调用方法

页面

<el-col :span="4">
      <el-input placeholder="详细地址(最多输入50个字符)" v-model="data.address"       @input="inputFunction()" :maxlength="30"></el-input>:maxlength="30"//限制输入30个字符
    </el-col>
    <el-col :span="5" >输入{{insert}}个字符</el-col>

方法

methods: {
      inputFunction(){
          this.insert=this.data.address.length
      }},

data

data() {  return { insert:''}},

 

 

 

 

 

elementUi组件下拉框绑定事件无效的解决方案

 

正确打开方式 @click.native绑定点击事件

<el-dropdown>

          <span class="el-dropdown-link" ref="echarType">

           柱状图<i class="el-icon-arrow-down el-icon--right"></i>

          </span>

          <el-dropdown-menu slot="dropdown" >

            <el-dropdown-item>柱状图</el-dropdown-item>

            <el-dropdown-item @click.native="seeTable">表格</el-dropdown-item>

          </el-dropdown-menu>

        </el-dropdown>

 

 

V-bind css绑定  <div v-bind:class={src} </div> 缩写 <div :class={src} </div>

1 绑定一个图片 <img :src="src"></img> 在data中写地址src:"static/test.jpeg",

2  绑定HTML Class   Class 绑定

<div :class="{'textClor':isColor,'textSize':fontsize}">span</div>

Data中写 isColor:true, fontsize:true,

Style中写 .textClor{ text-color: aqua;}    .textSize{font-size: 50px;}

也可以直接绑定数据里的一个对象：

 <template>中写法 <div :class="classObject">span</div>

Data中写 classObject:{'textClor':true,  'textSize':false,}

Style 不变

* 数组语法

  <template>中写法<div :class="[classa,classb]">span</div>

 Data中写  classa:'textClor', classb:'textSize',

Style 不变

   

* 当有多个条件时也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div> 

3 style 绑定

 <template>写法<div :style="{color:activeClor,fontSize:fontSize +'px'}">span</div>

Data 中写法   activeClor:'red',   fontSize:30,

      * 直接绑定到一个样式对象通常更好，这会让模板更清晰：        

   <template>写法<div :style="text">span</div>

Data 中写法text:{  color:'red',fontSize:'30px',}

      *数组写法

 <template>写法<div :style="[styleObjectA,styleObjectB]">span</div>

Data 中写法   styleObjectA:{  color:'red', fontSize:'30px'},
      styleObjectB:{  textDecoration:'underline'  }添加下划线样式

*多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

 

v-model  表单控件绑定

      可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

     1*Text

        <template>写法

<div>{{mess}}</div>显示用户输入的值
<input type="text" v-model="mess" placeholder="请输入值"><br>

Data写法 mess:'', 定义一个空的值

 

2* Multiline text 多文本输入checkbox

  <template>写法 

   <div>{{message}}</div>显示用户输入的值

   <textarea v-model="message" placeholder="添加多行"></textarea>

   Data写法message:'', 定义一个空的值

3* 多选框

  <template>写法 

 <div>{{mo}}</div>如果点击就显示为true 如果没点击就显示false
 <input type="checkbox"  v-model="mo">

    Data写法 mo:false, 定义一个为false的值

4* 多个勾选框 绑定到同一个数组

<template>写法

 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 <label for="Jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 <label for="mike">Mike</label>  <br>
 <span>Checked names: {{ checkedNames | json }}</span>

 *Data写法checkedNames:[],定义一个空的数点击后的值存入mike|john|Jack数组中

其中 input中的id要与label中的for属性值要一致

5* radio 只能选一个的多选框

  <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label><br>
     <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label> <br>
  <span>Picked: {{ picked }}</span>

Data中定义个变量接收信息

  picked:[],

7 单选框

<template>写法

<select v-model="sel">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Sel: {{ sel}}</span>

Data中定义个变量接收信息

  data: function () {return { sel:'',  }

8 debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

<input v-model="msg" debounce="500*200">

 

 

父子组件传值

1 通过prop实现通信

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：

静态传递

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

* 传页面

 在子面写入组件<template><div style="color: red">  hello world </div></template>

在父页面引用子组件页面 import ssss from './ssss'

 调用   export default { components: {ssss},}

父页面就可以调用子页面的组件了<template><ssss></ssss></template>

* 传自定义属性

     子组件写法

<template> <div >{{message}}</div></template>

export default {props:['message'],  data (){  return{ na:'子组件页面', }}

严谨的写法

Props：{users:{type:Array,required:true}}//type:Array传递的类型

父组件写法

<template> <div>  <users :message="子組件属性"></users>  </div></template>

      <script> import users from './testS' 引入子组件地址  

export default {components: { users},</script> 实例化子组件

动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

 

父组件写法

<template> <div>

    <users :message="子組件属性1"></users>
    <!--   这是一个javaScript表达式不是一个字符串-->
    <users :message="a+b"></users>
    <users :message="msg"></users> </div>
  </template>

<script>
import users from './testS'

export default {  components: {  users  },

            data() { return { a:'我是子组件2',    b:12334,msg:'我是子组件3'+Math.random()}}}

</script>

子组件不变

 

 

2 通过$ref实现通信

·如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。

·如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

子组件写法

<template> <div >{{message}}</div></template>
<script>  export default { data (){return{  message:''  } },
       methods:{ getMessage(m){ this.message=m;}}}
</script>

父组件写法

<template> <div> <h1>这是父组件页面</h1> <users ref="msg"></users> </div></template>
<script> import users from './testS'

export default {

components: { users},
           mounted:function(){

   console.log(this.$refs.msg);//控制台输出信息
           this.$refs.msg.getMessage('我是组件一');  }找到ref名为msg 的构造调用子组件方法

 </script>

 

prop和$ref之间的区别：

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

 

 

3 通过$emit实现通信  

vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

父组件写法

<template> <div><h1>{{title}}</h1><sonn @getMessage="showMsg"></sonn></div></template>

接收子组件名字为getMessage的$emit提交方法命名为showMsg
<script> import sonn from './son';
    export default {components:{sonn},
      methods:{showMsg(title){this.title=title;}},把showMsg方法里的数据拿出来
      data(){return{ title:''}},}
</script>

子组件写法

<template><div><h3>这是子组件信息</h3></div></template>
<script>export default {mounted:function() {this.$emit('getMessage','这是父组件') }}
           </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

生命周期

1、beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2、created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

 

该钩子在服务器端渲染期间不被调用。

4、mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

 

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

 

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

 

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

 

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

 

 

7、activated

keep-alive 组件激活时调用。

 

该钩子在服务器端渲染期间不被调用。

8、deactivated

keep-alive 组件停用时调用。

 

该钩子在服务器端渲染期间不被调用。

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

 

该钩子在服务器端渲染期间不被调用。

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

该钩子在服务器端渲染期间不被调用。

11、errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

 

 

 

 

 

 

           vue

杂记 脚手架

console.log()控制台打印输出和alert()差不多   

!important设置Css优先级最高

display: flex; <div style=" flex: 1;"/></div>设置水平状态下div占的宽度比

<style scoped>  设置作用域 只限于目前页面

插值

<template>写法
       <div v-once>{{su}}</div> 当标签中带v-once 时插值处的内容不会更新，但会影响其                             

他节点上的数据绑定
      <input type="button" @click="insert" value="点击">

computed:计算属性 

<template>写法 <div>age+a={{addToA}}</div>

在methods: 中 computed:{addToA:function(){   return this.age+this.a  },

data: 中 a:0,

ref数据绑定

<template> <input type="text"  ref="name"></input>
 <input type="button" @click="insert">

methods:{  insert:function () { this.b=this.$refs.name.value; }},

this.$refs.name.value;获取ref名为name的value值

    data:  function(){return{  n:'',}}}

引图片

<template> <img class="images" :src="imgSrc">

 data: imgSrc:"图片路径",

For循环 循环数组

1 <template> 页面中循环显示数组的方法

<li v-for="(item , index) in brands[brand].category[cate].skill"
    @click="chooseCategories(index)" index 要查询的数组下标

brands[brand] 数组[下标].skill数组内字段
   :class="[skillsIndex===index?'selectedShow choiceBox':'choiceBox']"
>
    {{item.skills}} 显示数组内的字段

</li>

 

2  methods:中用For循环数组内数据

for(let i in this.brands){ i是下标
    console.log(this.brands[this.brand]);
}

全局组件

  在main页面设置

Import User from ‘./components/Users’ //导包 Users是一个vue页面

Vue.component(“users”,Users) //全局注册组件  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

指令

V-text

 更新元素的textContent。如果要更新部分的textContent，需要使用{{ Mustache }} 插值。

<span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span>

V-html

与V-text一样 只是V-text是设置文本的 V-html渲染css的

<div v-html="html"></div>     data 里面的 html:'<h1>教程</h1>',

v-if  判断文本中属性是否为确定的值，如果是就显示后面的属性，如不不是就不显示

<h1 v-if="ok">Hello</h1>

data (){ return {ok:true,}}

默认判断ok 属性是否为true 是就显示Hello 不是就显示为空

v-show

也是根据条件来展示元素的，和v-if的功能类似。但是v-show中如果条件为false就生成代码不显示。而v-if如果条件为false,就直接不生成代码。

 

v-if与 v-else   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

 <div v-if="Math.random()>0.5">
    sorry
  </div>
  <div v-else>
    not sorry
  </div>
</div>

 

判断Math.random()>0.5 是的话就输出sorry 不是就输出 not sorry

v-else-if

<div v-if="show === 'ab'">ab</div>
<div v-else-if="show === 'b'">b</div>
<div v-else-if="show === 'c'">c</div>
<div v-else>abcde</div>

 

data (){
   return {
        show:'cb',
  }

判断字符串是否为ad 是否为b 是否为c 否则显示abcde

 

 

 

 

 

 

V-for

<template>

<div>
      <ul>
        <li v-for="todo in tods "> 或者"(todo i) in tods " 键是i 值是todo
          {{todo.txt}}
        </li>
      </ul>
    </div>
</template>

 

<script>

data (){
   return {

tods:[
  {txt:'你好'},
  {txt:'数组'},
  {txt:'函数'},
]

</script>

循环获取 tods里的值

或者

  <li v-for="todo in tods ">
          获取 id {{user.id}}  获取姓名{{user.name}}

 </li>

用v-for 迭代数字

 <ul>
    <li v-for="todo in 10 ">
      这是第{{todo}}循环
    </li>
</ul>

 

V-on 事件<a v-on:click="doThis"></a> 缩写 <a @click="doThis"></a>

事件修饰符v-on:click

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

2 <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

3<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> 4<!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

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

6 <!-- 添加事件监听器时使用事件捕获模式 --> 

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> 

<div v-on:click.capture="doThis">...</div> 

7 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

 <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

提示：v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键值修饰符@keyup

<template> <div>{{n}}</div> <input type="text"  ref="name" @keyup="insert"></input>

v-on:keyup跟随键盘输入调用insert方法

methods: { insert:function () { this.n=this.$refs.name.value;}},

data:  function(){ return{ n:'', } }}

如果v-on:keyup.enter 这样写只有按回车键才能触发里面的方法

 

v-on:input 标签 跟随键盘输入调用方法

页面

<el-col :span="4">
      <el-input placeholder="详细地址(最多输入50个字符)" v-model="data.address"       @input="inputFunction()" :maxlength="30"></el-input>:maxlength="30"//限制输入30个字符
    </el-col>
    <el-col :span="5" >输入{{insert}}个字符</el-col>

方法

methods: {
      inputFunction(){
          this.insert=this.data.address.length
      }},

data

data() {  return { insert:''}},

 

 

 

 

 

elementUi组件下拉框绑定事件无效的解决方案

 

正确打开方式 @click.native绑定点击事件

<el-dropdown>

          <span class="el-dropdown-link" ref="echarType">

           柱状图<i class="el-icon-arrow-down el-icon--right"></i>

          </span>

          <el-dropdown-menu slot="dropdown" >

            <el-dropdown-item>柱状图</el-dropdown-item>

            <el-dropdown-item @click.native="seeTable">表格</el-dropdown-item>

          </el-dropdown-menu>

        </el-dropdown>

 

 

V-bind css绑定  <div v-bind:class={src} </div> 缩写 <div :class={src} </div>

1 绑定一个图片 <img :src="src"></img> 在data中写地址src:"static/test.jpeg",

2  绑定HTML Class   Class 绑定

<div :class="{'textClor':isColor,'textSize':fontsize}">span</div>

Data中写 isColor:true, fontsize:true,

Style中写 .textClor{ text-color: aqua;}    .textSize{font-size: 50px;}

也可以直接绑定数据里的一个对象：

 <template>中写法 <div :class="classObject">span</div>

Data中写 classObject:{'textClor':true,  'textSize':false,}

Style 不变

* 数组语法

  <template>中写法<div :class="[classa,classb]">span</div>

 Data中写  classa:'textClor', classb:'textSize',

Style 不变

   

* 当有多个条件时也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div> 

3 style 绑定

 <template>写法<div :style="{color:activeClor,fontSize:fontSize +'px'}">span</div>

Data 中写法   activeClor:'red',   fontSize:30,

      * 直接绑定到一个样式对象通常更好，这会让模板更清晰：        

   <template>写法<div :style="text">span</div>

Data 中写法text:{  color:'red',fontSize:'30px',}

      *数组写法

 <template>写法<div :style="[styleObjectA,styleObjectB]">span</div>

Data 中写法   styleObjectA:{  color:'red', fontSize:'30px'},
      styleObjectB:{  textDecoration:'underline'  }添加下划线样式

*多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

 

v-model  表单控件绑定

      可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇，v-model 不过是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。

     1*Text

        <template>写法

<div>{{mess}}</div>显示用户输入的值
<input type="text" v-model="mess" placeholder="请输入值"><br>

Data写法 mess:'', 定义一个空的值

 

2* Multiline text 多文本输入checkbox

  <template>写法 

   <div>{{message}}</div>显示用户输入的值

   <textarea v-model="message" placeholder="添加多行"></textarea>

   Data写法message:'', 定义一个空的值

3* 多选框

  <template>写法 

 <div>{{mo}}</div>如果点击就显示为true 如果没点击就显示false
 <input type="checkbox"  v-model="mo">

    Data写法 mo:false, 定义一个为false的值

4* 多个勾选框 绑定到同一个数组

<template>写法

 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
 <label for="Jack">Jack</label>
 <input type="checkbox" id="john" value="John" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
 <label for="mike">Mike</label>  <br>
 <span>Checked names: {{ checkedNames | json }}</span>

 *Data写法checkedNames:[],定义一个空的数点击后的值存入mike|john|Jack数组中

其中 input中的id要与label中的for属性值要一致

5* radio 只能选一个的多选框

  <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label><br>
     <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label> <br>
  <span>Picked: {{ picked }}</span>

Data中定义个变量接收信息

  picked:[],

7 单选框

<template>写法

<select v-model="sel">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Sel: {{ sel}}</span>

Data中定义个变量接收信息

  data: function () {return { sel:'',  }

8 debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

<input v-model="msg" debounce="500*200">

 

 

父子组件传值

1 通过prop实现通信

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：

静态传递

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

* 传页面

 在子面写入组件<template><div style="color: red">  hello world </div></template>

在父页面引用子组件页面 import ssss from './ssss'

 调用   export default { components: {ssss},}

父页面就可以调用子页面的组件了<template><ssss></ssss></template>

* 传自定义属性

     子组件写法

<template> <div >{{message}}</div></template>

export default {props:['message'],  data (){  return{ na:'子组件页面', }}

严谨的写法

Props：{users:{type:Array,required:true}}//type:Array传递的类型

父组件写法

<template> <div>  <users :message="子組件属性"></users>  </div></template>

      <script> import users from './testS' 引入子组件地址  

export default {components: { users},</script> 实例化子组件

动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

 

父组件写法

<template> <div>

    <users :message="子組件属性1"></users>
    <!--   这是一个javaScript表达式不是一个字符串-->
    <users :message="a+b"></users>
    <users :message="msg"></users> </div>
  </template>

<script>
import users from './testS'

export default {  components: {  users  },

            data() { return { a:'我是子组件2',    b:12334,msg:'我是子组件3'+Math.random()}}}

</script>

子组件不变

 

 

2 通过$ref实现通信

·如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。

·如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

子组件写法

<template> <div >{{message}}</div></template>
<script>  export default { data (){return{  message:''  } },
       methods:{ getMessage(m){ this.message=m;}}}
</script>

父组件写法

<template> <div> <h1>这是父组件页面</h1> <users ref="msg"></users> </div></template>
<script> import users from './testS'

export default {

components: { users},
           mounted:function(){

   console.log(this.$refs.msg);//控制台输出信息
           this.$refs.msg.getMessage('我是组件一');  }找到ref名为msg 的构造调用子组件方法

 </script>

 

prop和$ref之间的区别：

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

 

 

3 通过$emit实现通信  

vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

父组件写法

<template> <div><h1>{{title}}</h1><sonn @getMessage="showMsg"></sonn></div></template>

接收子组件名字为getMessage的$emit提交方法命名为showMsg
<script> import sonn from './son';
    export default {components:{sonn},
      methods:{showMsg(title){this.title=title;}},把showMsg方法里的数据拿出来
      data(){return{ title:''}},}
</script>

子组件写法

<template><div><h3>这是子组件信息</h3></div></template>
<script>export default {mounted:function() {this.$emit('getMessage','这是父组件') }}
           </script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

生命周期

1、beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2、created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

 

该钩子在服务器端渲染期间不被调用。

4、mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

 

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

 

该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6、updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

 

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

 

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated

 

 

7、activated

keep-alive 组件激活时调用。

 

该钩子在服务器端渲染期间不被调用。

8、deactivated

keep-alive 组件停用时调用。

 

该钩子在服务器端渲染期间不被调用。

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

 

该钩子在服务器端渲染期间不被调用。

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

该钩子在服务器端渲染期间不被调用。

11、errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。