Vue基础

首先运行项目 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可以提供性能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kitt15

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值