vue.js 核心知识点一

- 1.1 对于Vue是一套渐进式框架的理解

[主张最少,Vue可以根据开发者的实际需求来不断渐进,而不是一口气全部用上]
[搭积木,我们可以根据需求,利用社区良好的生态,借助已有的工具和库搭建我们的项目,用最小、最快的成本一步步搭建。]
先看到核心的部分(最小集),或者说是 Vue 这个名字的“初衷”: View,然后在此基础上进行开发者自身的 DIY 扩展,也就是按需采用。这个过程是随着开发者的需求逐步变化增长的,由简单到复杂的应用场景都可以涵盖到

- 1.2 vue几种常用的指令

  • 1.插入文本: v-text
    相当于元素的innerText属性,必须是双标签
  • 2.插入HMTL: v-html
    相当于元素的innerHTML属性
  • 3.循环: v-for
    如果names是数组,还有index属性,如v-for="(item,index) in names" ;
    如果names是对象,还有value,key属性,如v-for="(value,key,index) in names";
  • 4.双向绑定:v-model
    一般用在表达输入,很轻松的实现表单控件和数据的双向绑定。只能给具备value属性的元素进行双向数据绑定。
  • 5,6,7.条件渲染:v-show,v-if ,v-else
    区别:
    v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    v-show 就简单得多,是否隐藏元素——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
    v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。
    v-if直接从代码中删除了,v-show只是通过display来切换状态
  • 8.属性绑定:v-bind
    这个指令用于响应地更新 HTML 特性,比如绑定某个class元素或元素的style样式。
    v-bind:属性名="常量 || 变量名",简写形式——:属性名="常量 || 变量名"
//可以简写成
//如果要赋值常量,需要给常量用单引号包起来,如
//这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。
  • 9.绑定事件:v-on
    用于监听指定元素的DOM事件,比如点击事件。
    v-on:click = "方法名 || 直接改变 vue 内部变量",简写形式——@click = "方法名 || 直接改变 vue 内部变量"
  • 10.v-once
    只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能,也可以加给点击事件,默认只能点击一次

- 1.3 vue常用的修饰符

  • v-model的修饰符

  v-model 是用于在表单表单元素上创建双向数据绑定的指令。在