vue相关

计算属性

1、内部有set,get方法，默认直接是get方法；

1、其所依赖的变量指不变，无论调用多少次，计算属性也只执行一次（会缓存）；而method调用多少次执行多少次

 

v-on

1、事件监听时，函数没有参数可以省略（）

<button @clickbtn>按钮</button>

2、函数定义时，有参数，但是监听时未传入参数，则会将浏览器产生的事件对象event传入到方法

<button @clickbtn2>按钮</button>
function clickbtn2(param){
console.log(param);
}

3、函数定义时，既有参数，也需要event

 

<button @clickbtn2(123,$event  )>按钮</button>
function clickbtn2(param,event){
   console.log(param);
   console.log(event);
}

 过滤器

filter

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

 

 for循环

var books=[{
  name:'语文',
  price:20    
},
{
  name:'数学',
  price:21    
},
]
for(let i in books){
  console.log(books[i]); //{name: '语文', price: 20}
// {name: '数学', price: 21}

}
for(let item of books){
  console.log(item);
//{name: '语文', price: 20}
// {name: '数学', price: 21}

}

  v-model与radio

<div id="example-4">
  <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>
</div>

  v-model与checkbox

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

<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 }}</span>
//checkedNames为数组

  v-model与select

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
//单选 selected为选中的值

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
//多选 selected为选中的所有值，是个数组

 Vue父子组件通信目前已支持驼峰命名，组件命名也已支持驼峰，脚手架里写时支持的，直接引用vue.js文件会warning