Vue基础_学习笔记

** 使用引入Vue.js方式

知识点

声名:

<div class="app">{{content}}</div>
var wkApp = new Vue({
    el:'.app',
    data:{
        content:'hello world'
    }
});
  1. el :Vue实例就在绑定页面上的元素内创建,值和jq类似,若是id用#,class用点(.)。

  2. data : 存储与页面绑定对应的数据,key值就是与页面绑定的变量名
    在组件中,data必须用函数方式。

  3. Vue组件外获取组件内值得方式:
    组件名.$data.变量名
    组件名.变量名
    eg:wkApp.$data.contentwkApp.content

  4. Vue每一个组件,都是一个Vue的实例。

  5. 区别:传统的核心是操作dom,Vue是操作数据。


常用模板(显示内容)

{{}} 插值表达式 <div> {{msg}}</div>
v-text 显示内容 <div v-text="msg"></div>
v-html 显示html片段内容 <div v-html="msg"></div>
v- 开头的指令,后面的值都是js表达式


常用指令

  • v-model: 双向绑定,常用在input。

  • v-bind
    属性绑定,可简写为:。如:v-bind:class可简写为:class

  • v-bind:class
    样式绑定:
    1.对象语法
    v-bind:class="{a:b}"
    a: class名
    b: js表达式变量名

<div v-on:click="changeClassClick" v-bind:class="{classBlock:classbl}">Class变色A</div>
changeClassClick:function(){
   this.classbl = true;
},

2.数组语法
:class=[a,b]
a,b 是 js表达式变量名,如:class=[‘activated’],即:class=‘activated’
也可以用三目表达式::class=[classbl?'classBlock':'classColor']

<div @click="changeClassBClick" :class=[classblB,classclB]>Class变色B</div>
changeClassBClick:function(){
  this.classblB = 'classBlock';
  this.classclB = 'classColor';
}
  • v-bind:style
    也分为对象、数组两种方式,和class大同小异。
    styleA: 是一个变量,内容是对象。
<div :style="styleA" @click="styleAClick">style变色A</div>
<div v-bind:style=[styleB,styleC]>style变色B</div>
styleAClick:function(){
    this.styleA = {'font-size':'18px','color':'pink'};
    this.styleB = {'font-size':'10px'};
    this.styleC = {'font-weight':'bold'};
}
  • <template>元素当做不可见的包裹元素。
  • v-for:
  • 在2.2.0+ 的版本,当在组件中使用 v-for 时,key 必写,key值可以写index下标值,但会影响一点效率,一般可以用后端返回数据中的id作为key值。
  • v-for with v-if,当它们处于同一节点,v-for 的优先级比 v-if 更高,先执行for再执行if,相当于for在外层,if在for循环的内层。
<li v-for="(item,index) of list" :key="index">{{item}},{{index}}</li>

性能最优:加key值,并尽量不用index值,可以用后端数值中的id

也可以用v-for="item in list" index指代下标;in或of关键字都可以。
of和in的区别,官网是这么说的“你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法”

  • v-show: 是否显示,为false时display:none;

事件绑定

  • v-on
    如在页面上绑定v-on:click="liClick",在vue实例中需添加对应的liClick事件:
    v-on:click可以简写为 @click
  • 事件方法都写在methods中,在methods中获取data中的变量,this.变量名
methods:{
  liClick:function(){
    alert('liClick');
  }
}
  • v-if: 是否显示,为false时会remove掉dom节点
  • <template>元素当做不可见的包裹元素,在页面渲染时不会渲染这一层的dom标签。
  • key值
    现象:在input框中输入内容,修改isShow的值后,input的值并未清空。
    解决:<input key="username">
    这是因为Vue的渲染机制,官网所说“Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。”
<template> 
<a v-if='isShow===true' v-bind:title="title">{{header}} <input /> </a>
<a v-else-if='isShow===1'>else if <input /></a>
<a v-else>else <input /></a>
</template> 

列表页面数据渲染的方式

数组

直接使用list[i] = ‘abc’; 的方式,无法将修改后数组的值同时在页面上渲染出来。
1. 通过变异方法
push(), pop(), shift(), unshift(), splice(), sort(), reverse()
Vue中的变异方法:
例:
app.list.splice(0,0,'nihao'); //修改list的第一个数组的值为‘nihao’
即第一个参数是要修改的值的下标,第二参数是待删除的值得下标,第三个值是待修改的值的内容。具体参数用法和js的一样。
2. 通过修改整个值的内容
app.list = ['你','好'];
3. 通过set方法

  • Vue.set(app.$data.list,0,'文');
  • app.$set(app.$data.list,1,'不是');
    第一个参数是数组,第二个参数是要修改的值得下标,第三个参数是要修改的值的内容。
对象

先创建个对象,直接将刚才的list修改为对象,v-for一样可以循环显示出来。
1. 通过修改整个值的内容
app.$data.list = {'a0':'z','a1':'w','a2':'k'}
2. 通过set方法
Vue.set(app.$data.list,'a0','scorpio')
app.$set(app.$data.list,'a1','scorpio')

MVVM模式

Vue面向数据,主要操作M层,M层是data的数据操作;
M层:数据层
V层:页面
VM层:Vue去实现的渲染的


附 demo:

	<div id="root">
        <h6>
            <template> 
            <a v-if='isShow===true' v-bind:title="title">{{header}}<input placeholder="first" /> </a>
            <a v-else-if='isShow===1'>else if <input placeholder="second" /></a>
            <a v-else>else <input placeholder="third" /></a>
            </template>
            <button @click="headerClick">{{isShowBtn}}</button>
        </h6>
        <input v-model="inputValue"/>
        <button @click="submitClick">提交</button>
        <div v-on:click="changeClassClick" v-bind:class="{classBlock:classbl}">Class变色A</div>
        <div @click="changeClassBClick" :class=[classblB,classclB]>Class变色B</div>
        <div :class=[classbl?'classBlock':'classColor']>Class变色C</div>
        <div :style="styleA" @click="styleAClick">style变色A</div>
        <div v-bind:style=[styleB,styleC]>style变色B</div>
        <ul>
            <li v-for="(item,index) of list" keys="index" v-on:click="liClick">{{item}},{{index}}</li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el:'#root',
            data:{
                header:'start',
                list:[],
                isShow:true,
                inputValue:'',
                inputValue2:'',
                isShowBtn:'隐藏',
                title:'标题',
                classbl:false,
                classblB:'',
                classclB:'',
                styleA:'',
                styleB:'',
                styleC:''
            },
            methods:{
                liClick:function(){
                    alert(this.inputValue);
                },
                headerClick:function(){
                    this.isShow = !this.isShow;
                    this.isShowBtn = this.isShowBtn=='显示'?'隐藏':'显示';
                },
                submitClick:function(){
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                changeClassClick:function(){
                    this.classbl = true;
                },
                changeClassBClick:function(){
                    this.classblB = 'classBlock';
                    this.classclB = 'classColor';
                },
                styleAClick:function(){
                    this.styleA = {'font-size':'18px','color':'pink'};
                    this.styleB = {'font-size':'10px'};
                    this.styleC = {'font-weight':'bold'};
                }
            
            }
        });

        setTimeout(function(){
            app.$data.data = 'learning';//外部获取值
        },1000);
    </script>
	<style>
        .classBlock{
            background: plum;
            width:160px;
            height: 30px;
        }
        .classColor{
            color: wheat;
        }
    </style>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值