vue.js的基础使用

vue.js的使用：

1. 下载

• cdn
  https://cdn.bootcss.com/vue/2.6.10/vue.js

• 本地下载

• 模块化安装
  npm install vue -D/-S 、 cnpm install vue -D/-S 、 yarn install vue -D/-S

2. 引入

    <script src=" https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
   

3. 初始化

   1. 必须有一个html容器，决定vue.js的作用范围

       <div id="app"></div>
      

   2. 初始化

       new Vue(options)
      

      • el 表示装载，将上面id为app的模板装载在 new Vue的实例中，也确定了一个作用范围
      • data 数据

      注意：学习vue.js既要学习配置项&&api

   3. 数据绑定（声明式渲染）
      名词： mustauch语法糖： 双大括号语法 {{}} 支持js语法
      注意事项：

      1. 模板中的 this 指的是 new Vue得到的实例 ， 在模板中 this可以省略不写

          <p> {{ this.$data.msg }} </p>                           
           <p> {{ this.msg }} </p>                           
           <p> {{ msg }} </p> 推荐的     
         

      2. data选项在根实例中是对象， 除了跟实例以外是函数

   4. 模板语法

      1. alert consol.log …不能用
      2. if条件改成使用三元表达式
      3. 方法一定要写在methods里面，不要直接写在模板语法里面
      4. 模板语法中支持使用匿名函数可以直接写

   5. 样式渲染

      1. 列表渲染

         1. 使用v-for指令进行列表渲染：v-for=“item in data”
         2. 参数最多可以有三个var-for="((index,item,key)) in data"
            index->索引，item->值，key->如果是对象， 表示对象的key
            示例：

           <ul>
         	<li v-for=" item in size ">
           	  {{ item }}
          	</li>
         </ul>
           <ul>
         	<li v-for=" (item,key,index) in obj ">
             {{ index }}---{{ item }}---{{key}}
         </li>       	
         </ul>
         				----------------------
         <script>
         	 new Vue({
         		 el: '#app',
                 data: {
                     size: {
                         str:'hello'
                     }
             })
         </script>
         				------------------------
         结果：
         1.hello
         2.0---hello---str
         

      条件渲染
      1.if分支渲染

      • 单路分支：v-if

         	<p v-if = " f ">
        	 		 true
         	</p>
        

      • 双路分支

          	<p v-if = " f ">
                  true
                </p>
                <p v-else>
                  false
                </p>
        

      • 多路分支

          	 <p v-if = " text === 'A'"> A </p>
           	 <p v-else-if = " text === 'B'"> B </p>
            	<p v-else> C </p>
        

   2.v-show渲染

    		<p v-show = " f ">
          		if条件
      		  </p>
   

v-if 、 v-show对比

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能
   • 如果条件为假，v-show有较高的初始渲染开销
   • v-if 有更高的切换开销

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