Vue基础

最新推荐文章于 2022-10-17 10:23:51 发布

原创最新推荐文章于 2022-10-17 10:23:51 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

前端专栏收录该内容

31 篇文章

订阅专栏

首先运行项目 npm run dev
然后打开src/App.vue，去掉多余的部分如下：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

<style lang="scss">

</style>

可以看出一个Vue文件最基本由template，script，css组成。

文本插值：

字符串： msg:‘Hello world’-------------------{{msg}}
对象：obj0:{name:‘same’,age:‘23’}---------{{obj0.name}} {{obj0.age}}
数组：list0:[1,2,3,4,5]--------------------------<ul> <li v-for="item in list0">{{item}}</li> </ul>
对象数组：

list1:[{name:'same',age:'23'},{name:'kk',age:'25'},{name:'tony',age:'26'}],


<!--{{index}}表示数组下标-->
<template>
  <div id="app">
	<ul>
	   <li v-for="(item,index) in list1">name:{{index}}{{item.name}},age:{{item.age}}</li>
	</ul>
  </div>
</template>

比较复杂的对象数组(对象中带有数组):

list2:[
      {
        type:'国内资讯',
        list:[
                {title:'国内1',time:'2018-09-09'},
                {title:'国内2',time:'2018-09-08'},
                {title:'国内3',time:'2018-09-07'},
                {title:'国内4',time:'2018-09-06'},
              ]
       },

       {
        type:'国际资讯',
        list:[
                {title:'国际1',time:'2018-09-09'},
                {title:'国际2',time:'2018-09-08'},
                {title:'国际3',time:'2018-09-07'},
                {title:'国际4',time:'2018-09-06'},
              ]
       },

      ]


<!--模板（两个for循环）-->
<template>
  <div id="app">
	<ul>
      <li v-for="item in list2">
        type:--{{item.type}}
          <ol>
            <li v-for="subitem in item.list">title:  {{subitem.title}}----time:{{subitem.time}}</li>
          </ol>
      </li>
    </ul>
  </div>
</template>

原始 HTML
直接使用{{}}并不能输出预料中的html，这是需要v-html

<div>使用v-html------<span v-html="html1"></span></div>

html1:'<span style="color:red">这是一个HTML</span>'

特性（html属性，href，src等）
我们并不能这样写<img src="{{imgurl}}" alt=""/>，官方文件规定：Mustache 语法不能作用在 HTML 特性上，即不能再html标签的属性上使用{{}}来赋值。
我们使用 v-bind:src=“somedata” 或 :src="somedata"

	imgurl:'https://img-ads.youkuaiyun.com/2018/201809060944011099.jpg'
	

	<img v-bind:src="imgurl" alt=""/>

触发事件：

点击事件为例：v-on:click=“fn()” 或 @click=“fn()”，fn()写在mothods:{}里边

具体代码(注意必须有一个根节点)：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    
    <h2>name:{{obj0.name}},age:{{obj0.age}}</h2>
    
    <ul>
      <li v-for="item in list0">{{item}}</li>
    </ul>
    
    <ul>
      <li v-for="(item,index) in list1">name:{{item.name}},age:{{item.age}}</li>
    </ul>

    <ul>
      <li v-for="item in list2">
        type:--{{item.type}}
          <ol>
            <li v-for="subitem in item.list">title:  {{subitem.title}}----time:{{subitem.time}}</li>
          </ol>
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello World',
      obj0:{name:'same',age:'23'},
      list0:[1,2,3,4],
      list1:[{name:'same',age:'23'},{name:'kk',age:'25'},{name:'tony',age:'26'}],
      list2:[
      {
        type:'国内资讯',
        list:[
                {title:'国内1',time:'2018-09-09'},
                {title:'国内2',time:'2018-09-08'},
                {title:'国内3',time:'2018-09-07'},
                {title:'国内4',time:'2018-09-06'},
              ]
       },

       {
        type:'国际资讯',
        list:[
                {title:'国际1',time:'2018-09-09'},
                {title:'国际2',time:'2018-09-08'},
                {title:'国际3',time:'2018-09-07'},
                {title:'国际4',time:'2018-09-06'},
              ]
       },

      ]
    }
  }
}
</script>

运行结果如下：
这里写图片描述

class与style

Class绑定

对象语法
     :class="{red:true,f12:nosmall}"  ====>{类名:boolean}
     :class="classObj"====>data里的对象名 classObj : {类名:boolean}
     :class="classNew"====>计算属性返回一个对象 computed : {对象名(){return obj{类名:boolean} }}
 数组语法：
  :class="[redClass,f12Class]"       ====>  data里 return {变量名:类名}
  一些表达式
  数组里内嵌对象

style绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"  ====》  {样式名：data绑定的值}
:style="styleObject"  ====> classObj : {样式名 : 值}

示例

<template>
    <div>
        <div class="center" :class="{red:true,f12:nosmall}">使用对象语法1{类名:boolean}</div><!--<div class="center red"></div>-->
        <div class="center" :class="classObj">使用对象语法2(直接使用data里对象)</div><!--<div class="center f12"></div>-->
        <div class="center" :class="classNew">使用对象语法(计算属性返回一个对象obj:{类名:boolean})</div><!--<div class="center red"></div>-->

        <div class="center" :class="[redClass,f12Class]">使用数组语法 data里 return {变量名:类名}</div> <!--<div class="center red f12"></div>-->
        <div class="center" :class="[isred?redClass:'',f12Class]">使用数组语法</div> <!--<div class="center red f12"></div>-->
        <div class="center" :class="[{red:isred},f12Class]">使用数组语法(内嵌对象)</div> <!--<div class="center red f12"></div>-->


        <div style="text-align:center"  v-bind:style="{  color: activeColor, fontSize: fontSize + 'px' }">绑定样式对象语法 {样式名：data绑定的值}</div>
        <div style="text-align:center"  v-bind:style="styleObject">绑定样式对象语法 obj:{样式名：data绑定的值}</div>
        <div style="text-align:center"  v-bind:style="[styleObj,backgroundObj]">绑定样式数组语法</div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                //对象语法
                isred:true,
                nosmall:false,
                classObj:{
                    red:false,
                    f12:true,
                },
                //数组语法
                redClass:'red',
                f12Class:'f12',

                activeColor:'red',
                fontSize:12,
                styleObj:{
                    color:'red',
                    fontSize:'12px'//注意这里使用font-size会报错，vue会将fontSize自动转换成font-size
                    },
                backgroundObj:{
                    background:'green',
                }



            }
        },
        computed:{
            classNew(){
                return {
                    red:this.isred,
                    f12:this.nosmall
                }
            }
        }
    }
</script>
<style>
    .center{
        text-align:center;
    }
    .red{
        color:red;
    }
    .f12{
        font-size:12px;
    }
</style>

computed，watch，methods

计算属性computed有缓存，当依赖的数据发生改变时才会重新计算，其他数据发生改变时并不会触发计算。
侦听属性watch可以侦听数据的变化，但写起来会比computed麻烦，但是有些场合还是需要用到watch
方法methods，没有缓存。
综上如果一个功能可以使用上述3个方法实现，优先使用computed

条件渲染：

v-if与v-show的区别在于v-if=“false"时，会整个dom消失，而v-show是加上display:none。
在input加上key是为了避免vue复用页面上的组件，标注key，说明这个元素是唯一的。

<div v-if="show"><input key="name"></div>
<div v-else-if="show"><input key="password"></div>
<div v-else></div>

列表循环

数组循环
更改list不能使用下标直接更改，使用push pop shilft unshilft splice reverse
改变引用地址如：this.list=[]

<div v-for="item of list">{{item}}</div>
<div v-for="(item,index) of list">{{item}} ------- {{index}}</div>带上index
 <div v-for="item of list" :key="item.id">{{item}}</div>使用key可以提供性能

对象循环
改变对象
改变引用地址如：this.obj={}

     <div v-for="item of obj">{{item}}</div>
     <div v-for="(item,key) of obj">{{item}} ------- {{key}}</div>带上index
     <div v-for="(item,key,index) of obj">{{item}} ------- {{key}}------- {{index}}</div>带上index
     <div v-for="item of list" :key="obj.id">{{item}}</div>使用key可以提供性能