VUE学习总结

<div> {{ 变量 }} < /div> 

Vue采用胡须语法糖，在dom元素中，以双花括弧的形式包裹变量

const app = new Vue({
el: ‘#app’, // 根节点入口
data:{ // 所有组件共享的数据
message:  ‘Hello Vue’，
methods：{
	bnclick(){
	// 功能逻辑
	}
}
}
})

提问：

1. 为什么new vue中的data是一个对象？
   因为new vue是一个创建vue实例，所有组件可共享此数据，此处做为一个跟数据共享

2. 为什么组件内的data是一个函数
   因为每一个组件都是独立的，在开发中并不希望data被修改，如果是一个对象，那么如果出现相同的key，就可能会导致其他组件下的data被修改，当作为一个函数时，利用闭包的原理，data都是相对独立的，不用担心数据被串改。

3. methods中为什么不能使用箭头函数
   methods为vue实例中的一个对象属性，无单独作用域，箭头函数的this指向是当前作用域的上下文，在methods中，this指向的是window

修饰符：
以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

计算属性默认只有getter，视应用场景而定，自己可以提供setter，例：

setter应用实例：

<template>
  <div id="app">
    <!--   桌腿数量用type= range 选择器，绑定变量legsCount-->
    <label>
      桌腿数量: <input type="range" v-model="legsCount">
    </label>
    <!--    桌子数量 绑定变量tableCount，并且输入数量时触发update -->
    <label>
      桌子数量： <input type="text" @input = "update" :value="tableCount">
    </label>
    <!--   统计结果 -->
    <output>
      我们将要做 {{legsCount}}桌腿，组成 {{tableCount}} 桌子
    </output>
  </div>
</template>

<script>

  export default {
    name: 'desk-top',
    data () {
      return {
        legsCount: 0
      }
    },
    computed: {
      tableCount: {
        get () {
          return this.legsCount / 4;
        },
        set (newValue) {
          this.legsCount = newValue * 4;
        }
      }
    },
    methods: {
      update (e) {
        this.tableCount = e.target.value
      }
    }
  }
</script>

<style>
  label, output {
    display: block;
    margin: 20px;
    text-align: center;
  }
  input {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>

vue中的methods：
只要被调用就需要重新执行，并需要根据执行内部逻辑来返回结果，没有缓存，在性能上不如computed。
执行一次运行一次，执行n次，运行n次。

watch的作用？
用来监听响应数据的变化。

在数据变化的同时进行异步操作或者比较大的开销，watch为最优选择。watch作为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

用法：
watch的简单用法

v-show：通过配置css来实现dom的显示与隐藏

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

v-if与v-for不建议一起使用，因为v-for比v-if有更高的优先级。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码将只渲染未完成的 todo。

总结：v-if与v-for不是不能一起使用，而是不建议，看自己循环的节点是否存在不想要渲染的视图而定

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

还可以遍历对象：
示例：

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

注意：在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

• .stop — 阻止事件冒泡
• .prevent — 阻止默认行为
• .capture — 事件捕获
• .self — 自身触发
• .once — 只触发一次
• .passive — 这个修饰符会执行默认方法，每次事件发生，浏览器都会去询问是否有preventDefault阻止该事件的动作，加上该修饰符就相当于告诉浏览器不需要再询问，没有阻止默认事件，减少页面卡顿。

self 是阻止自身不执行冒泡触发，不会阻止冒泡继续向外触发；stop 是从自身开始阻止冒泡不向外触发。所以self 一般用在父元素上，stop 一般用在子元素上

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

查看更多事件修饰符

• 传入一个对象的所有 property
  如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

• prop验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

• 自定义事件
  事件名不存在任何自动化的大小写转换。不能识别驼峰命名，仅支持 kebab-case的命名方式，例如：

this.$emit('myEvent')

<!-- 没有效果，监听不到myEvent事件 -->
<my-component v-on:my-event="doSomething"></my-component>

干什么的？
让我们在自定义的自组件标签中写html内容