** 使用引入Vue.js方式

知识点

el ：Vue实例就在绑定页面上的元素内创建
data : 存储与页面绑定对应的数据，key值就是与页面绑定的变量名
在组件中，data必须用函数方式。
Vue组件外获取组件内值得方式：
组件名.$data.变量名
或 组件名.变量名
Vue每一个组件，都是一个Vue的实例。
区别：传统的核心是操作dom，Vue是操作数据。

常用模板

{{}} 插值表达式 <div> {{msg}}</div>
v-text 显示内容 <div v-text="msg"></div>
v-html 显示html片段内容 <div v-html="msg"></div>
三者内部的内容都是js表达式

常用指令

v-model: 双向绑定，常用在input。
v-bind
属性绑定，可简写为:。如：v-bind:class,v-bind:style,:title,:href,:src 等。
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=[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'};
}

v-for:
- <template>元素当做不可见的包裹元素。
- 在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" keys="index">{{item}},{{index}}</li>

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

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>

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

更改数组，对象值的方式

数组
直接使用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')

附 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>

Vue基础_学习笔记

知识点

常用模板

常用指令

更改数组，对象值的方式

猜你喜欢