教程

vscode插件

  1. Vue VSCode Snippets
  2. Vue 3 Snippets
  3. Vetur

开发环境配置

  1. cnpm i  @vue/cli -g
  2. vue create xxx;

vue吸收了angular指令和react组件化

  1. vue的核心思想
  2.     1.组件化
  3.   2.数据驱动

一、vue-cli模板

  1. https://gitee.com/chengbenchao/vue-temp

二、vue指令

2-1 v-for

当vue用v-for正在更新已渲染过的元素列表时,它默认用’就地复用’策略。如果数据项的顺序被改变,vue将不是移动DOM元素来匹配数据项的顺序。而是简单复用此处每个元素。并且确保它在特定索引下显示已被渲染过的每个元素。
为了给vue一个提示,以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。你需要为每项提供一个唯一的key属性。

key是为了给DOM元素一个唯一的标识符。key的值也应该是唯一的。 key属性只能使用number/string 作用:能保持数据的唯一性,让data中的数据和页面中的数据强制关联起来。

  1.     <div id='app'>
  2.         <div>
  3.             <p><label for="id">id</label><input type="text" v-model="id"></p>
  4.             <p><label for="name">name</label><input type="text" v-model="name"></p>
  5.             <button @click="add">添加</button>
  6.         </div>
  7.         <p v-for="(item,index) of arr" 
  8.         ><input type="checkbox">{{item.id}}--{{item.name}}</p>
  9.     </div>
  10.     <script>
  11.         new Vue({
  12.             el:"#app",
  13.             data:{
  14.                 arr:[{name:"cheng",id:1},{name:"jiangwei",id:2},{name:"武器",id:3}],
  15.                 id:"",
  16.                 name:""
  17.             },
  18.             methods:{
  19.                 add(){
  20.                     if(this.id && this.name){
  21.                        this.arr.unshift({name:this.name,id:Number(this.id)})
  22.                     }
  23.                 }
  24.             }
  25.         })
  26.     </script>

2-2 v-if和v-show

一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗。
如果需要频繁切换v-show较好。如果在运行时条件不大可能改变v-if较好

v-if为false 是从DOM树上将元素移除。每次都会重新删除或创建元素
v-show 每次不会重新进行DOM的删除和创建操作。只是切换了元素的display属性
  • display：none会让元素从渲染树中消失，渲染的时候不占据任何空间；
  • visibility：hidden不会让元素从渲染树中消失，渲染的时候仍然占据空间，只是内容不可见。