引用 <script><script>

关键词：
new Vue({
el:"#xxx"
data:{}
method:{}
computed: { ( fullname: {set:function(){}/get:function(){}})}
watch:{}
beforeCreate/created/beforeMount/mouted/beforeUpdate/updated/beforeDestory/destoryed
})

• v-bind :

• v-on @

• v-show

• v-if

• v-else-if

• v-else
  在v-if/xxx中使用key来确立不要复用

• v-for

• v-model

• v-html

• v-once

• {{}}

• component 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

• prop
  data: function (){ return xxxx}

• is

• <slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

import xxx from
export default

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

2.2.0 新增

• .left
• .right
• .middle
  这些修饰符会限制处理函数仅响应特定的鼠标按钮。

表单

image.png
image.png
image.png

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

v-for的时候最好都加上key

image.png image.png

html调用vue的方法

1.html中引用用vue写的js, vue.js中用 var aaa=vue{el:'#vue-html'}，要绑定对应的id
2.html引用vue是有两种
标签内部引用， {{ name }}, {{ getname() }}
属性中引用， <button v-bind:click="xxxx xxxxx">, 这个xxxx同样可以是js里vue的元素或者对象。

vue语句

v-for
v-if v-else-if
注意v-show和v-if的区别，前者是在dom里面的，只是设置了display:none

<ul>
<li v-for="x in vars"> {{ var }}<>
<ul/>
v-for是可以有index的，（content,index）

<template>标签可以代替div，不会被加到dom里面去

注意模板有且只有一个跟标签

method / 计算属性computed / 侦听属性watch

1.method式调用就一定会运行。
2.computed计算属性是基于它们的依赖进行缓存的，依赖变了才会重新执行，没变的就不跑函数了，直接返回结果。即只在相关依赖发生改变时它们才会重新求值。注意Date.now() 不是响应式依赖这种不是响应依赖式。
3.watch 一种更通用的方式来观察和响应 Vue 实例上的数据变动
4.computed里面可以分get/set来处理类似watch的功能
5.watch用来做更通用的侦听器

#######axios
这式ajax的一个封装，和vue无关。
.watch方法用来接收错误
.then方法用来在处理正确的情况下执行的内容

1. label与form控件的关联,
   <label for="MyInput">My Input</label>
   <input id="MyInput" type="text">
   input与label关联的方式