vue起步

最新推荐文章于 2024-07-16 11:23:44 发布

原创最新推荐文章于 2024-07-16 11:23:44 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

vue起步

VUE是个MVVM框架（没完全遵循），即 M <-> VM <-> V

先来介绍一下MVC

model		M  数据  ajax/jsonp/数据解析  可以复用

view	    V  视图表现层 展示数据、创建元素，变色，运动 可以复用

control		C  控制层(串业务,事件驱动)  一般不复用

new Vue({
el:‘选择器’ 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})

  <!-- view层  V -->

  <div id="app">
  //{{数据名}}	模板 mustche  插值表达式  声明式渲染
    <h3>{{title}}</h3>
    <p>{{duanluo}}</p>
  </div>

  <script>

    //vm 是new出来的Vue实例
    let vm = new Vue({//配置选项
      // key:value  选项
      // el:'选择器'
      el:'#app',
      data:{ //MODEL  M
        title:'标题',
        duanluo:'段落'
      }
    })
  <script>

model层不同的数据类型在view层的渲染结果，即data：

string仍为字符
number转变为字符
布尔值会转变为字符
arr转变为字符
json转变为字符
fn转变为字符: {{fn}}
fn2: {{fn()}}
undefined变为空字符
null变为空字符
空字符不作为

插值表达式 | 指令 | 属性

{{数据名}}	模板 mustche  插值表达式  声明式渲染
 v-text="数据名"		vue特有的属性(指令)
 v-html="strong"		非转义输出
 v-for="(val,index) in 数据"		val值  index索引	变量数组、对象
   默认 :key="index"  指定key 是个bmw字符 vue是认得 修改VDom的key值
   :key="item.id"  指定key 是数据id（唯一性） 修改VDom的key值

   key的优势:  避免数据错乱导致的视图问题,提供性能 

 v-bind:html属性="数据"	普通的html属性绑定数据
   :html属性="数据"  简写   title/src/url/.....

 事件：
   v-on:事件名="方法"
     @事件名="方法"	简写
     @事件名="方法(参数)"
     @事件名="方法($event,参数)"		methods:{方法:function(ev,参数){ev/event}}

注意：vue提供的选项的值如果是函数时，不可用箭头函数,如果不是vue提供的选项值，那么也就可以用箭头函数了

 <h3>数据绑定的形式</h3>

    <h3>mustatch</h3>
    <!-- innerHTML动态化 -->
    <div>string: {{str}} </div>


    <h3>指令</h3>
    <!-- innerHTML动态化 写法不依赖mustache -->
    <div v-text="str"></div>


    <h3>属性绑定</h3>
    <!-- 属性名或值动态化 -->
    <!-- <img src="{{url}}" alt="">   --> <!-- vue1.x-->
    <img v-bind:src="url" alt="">
		<!-- 上面的可简写为 -->
    <img :src="url" alt="">
		
		
    <h3>转义</h3>
	<!-- 页面上显示带有标签 -->
    <div>{{strong}} </div>
    <div v-text="strong"></div>

    <hr>
    
    <h3>非转义</h3>
    <!-- 直接被转成初体的STRONG -->
    <div v-html="strong"></div>

    <hr>


    <h3>按需渲染|列表渲染|列渲</h3>
	<!-- 显示整个arr数组 -->
    <div>{{arr}}</div>

    <ul>
      <!-- 遍历出arr数组中的每一个 -->
      <li v-for="val in arr">{{val}}</li>
    </ul>

    <h3>条件渲染 | 条渲</h3>
    <!-- 当为true时显示，false消失 -->
    <div v-show="bl">box</div>



  </div>

  <script>

    //vm 是new出来的Vue实例
    let vm = new Vue({//配置选项
      el:'#app',
      data:{ //MODEL  M
        str:'标题123',
        url:'https://cn.vuejs.org/images/logo.png'
        strong:'<strong>STRONG</strong>',
        arr:['aa','bb','cc'],
        bl:true
      }
    })

  </script>

事件

  <div id="app">

    <h3>事件</h3>

    <div>{{count}}</div>
    <!-- <input type="button" value="+" v-on:原生事件> -->
    <!-- <input type="button" value="+" v-on:click="指定vue的methods"> -->
    <!-- <input type="button" value="+" v-on:click="指定vue的方法"> -->

    <!-- <input type="button" value="+" v-on:click="show"> -->
    <input type="button" value="+" @click="show">
    <input type="button" value="事件对象" @click="show2">
    <input type="button" value="this指向" @click="show3">
    <input type="button" value="传参" @click="show4(12,'bmw',$event)">

  </div>

  <script>

    //vm 是new出来的Vue实例
    let vm = new Vue({//配置选项
      el:'#app',
      data:{ //MODEL  M
        count:1,
      },
      methods:{
        // key:value
        // 方法:fn
        show:function(){
          // alert(1)
          // this==vm
          this.count++
        },
        show2:function(ev){//事件对象默认接收
          console.log('事件对象',ev);   //事件对象 MouseEvent {...}
          // ev.target.style.background='red'; //dom
        },
        show3:function(){
          console.log('this指向',this);   //this指向 Vue {}
        },
        show4:function(arg1,arg2,ev){//传参数是，事件对象，需要手动传递 $event
          console.log('参数',arg1,arg2);    //参数 12 bmw
          console.log('事件对象',ev);   //事件对象 MouseEvent {
        },
      }
    })

  </script>

列渲v-for | 条渲v-show

注：v-for需要指定key，不然会引起页面的紊乱，如：给点击的某一行设置背景颜色，当删除那一行时，替换的那一行仍然是有颜色，这是因为即使删除了，但是点击那一行的index不会变

  <div id="app">

    <h3>列表渲染</h3>

    <ul>
      <!-- <li v-for="val in arr">{{val}}</li> -->
      <li v-for="(val,index) of arr">{{val}}/{{index}}</li>
    </ul>

    <hr>

    <ul>
      <li v-for="item in arr2">
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
        <span>{{item.id}}</span>
      </li>
    </ul>

    <hr>

    <ul>
      <li v-for="item in arr3">
        <span>{{item.name}}</span>
        <span>{{item.age}}</span>
        <span>{{item.id}}</span>
        <ul>
          <li v-for="item in item.children">
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
              <span>{{item.id}}</span>
          </li>
        </ul>
      </li>
    </ul>
	<h3>数组</h3>
	    <ul>
	      <!-- aa/0 bb/1 cc/2  -->
	      <li v-for="(val,index) of ['aa','bb','cc']">{{val}}/{{index}}</li>	
	    </ul>
	
	    <hr>
	
	    <h3>对象</h3>
	    <ul>
	      <!-- 1/a 2/b 3/c -->
	      <li v-for="(val,key) of {a:1,b:2,c:3}">{{val}}/{{key}}</li>
	    </ul>
	
	    <hr>
	
	    <h3>字符</h3>
	    <ul>
	    	  <!-- i/0  /1 l/2 o/3 v/4 ... -->
		      <li v-for="(val,index) of 'i love you up to ever' ">{{val}}/{{index}}</li>
	    </ul>
	
	    <h3>数字</h3>
	    <ul>
	      <!-- 1/0 2/1 3/2 4/3 5/4 ... 10/9 -->
	      <li v-for="(n,index) of 10 ">{{n}}/{{index}}</li>
	    </ul>

    <h3>条件渲染的条件要的是一个布尔值，不是布尔会转换</h3>

    <div v-show=" '' ">空字符</div>
    <div v-show=" num ">{{num}}</div>
    <div v-show=" false ">false</div>
    <div v-show=" undefined ">undefined</div>
    <div v-show=" null ">null</div>
    <div v-show=" [] ">[]</div>
    <div v-show=" {} ">{}</div>
    <div v-show=" ({a:false}).a ">对象.属性</div>

    <input type="button" value="按钮" @click="bl=!bl">
    <div style="width:10px;height:19px;background:red" v-show="bl">盒子</div>

  </div>

  <script>
    //vm 是new出来的Vue实例
    let vm = new Vue({//配置选项

      el:'#app',
      
      data:{ //MODEL  M
        arr:['aa','bb','cc'],
        arr2:[
          {id:1,name:'alex',age:18},
          {id:2,name:'ppp',age:19},
        ],
        arr3:[
          {id:1,name:'alex',age:18,children:[
            {id:1,name:'xxx1',age:23},
            {id:2,name:'xxx2',age:23},
          ]},
          {id:2,name:'ppp',age:19}
        ],
        bl:false,//undefined/null
        num:0
      },
      methods:{
        show(){
          // this.bl=!this.bl;
        }
      }
    })

  </script>

模板表达式

  {{数据本身|data的属性|实例属性|变量|表达式}}
  v-指令名="数据|data的属性|变量|表达式|语句"

注：每个绑定都只能是包含单个表达式

  <div id="app">

    <h3>模板表达式</h3>

    <!-- 电话119 -->
    <div>电话{{ num + 9 }}</div>
    
    <!-- 翻转you love i -->
    <div>翻转{{ str.split(' ').reverse().join(' ') }}</div>
    
    <!-- 性别男 -->
    <div>性别{{ bl ? '男' : '女' }}</div>
    
    <img :src=" 'https://cn.vuejs.org' + url " alt="">

    <hr>
	<!-- 一下例子都不会生效 -->
    <!-- <div>性别{{ bl ? '男' : '女'; num+9 }}</div> -->
    <!-- <div>性别{{ if(bl){return '男'}else{return '女'} }}</div> -->



  </div>

  <script>

    let vm = new Vue({
      el: '#app',
      data: {
        str:'i love you',
        num:110,
        bl:true,
        url:'/images/logo.png'
      }
    })


  </script>