VUE基础知识

望星子蒙尘
131 阅读3分钟

v-形式的初级语法

Mustache语法

<body>
    <div id="app">
        <h1>{{first}}</h1>
        <h1>{{last}}</h1>
        <h1>{{first + '  ' + last}}</h1>
        <h1>{{first}} {{last}}</h1>
        <h1>{{counter*11}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)，const（常量）
        let obj = new Vue({
            data: {
                number :12
            }
        })
        const app = new Vue({
            el: '#app',//用于挂载要使用的元素
            data: {//定义元素
                first: 'hello',
                last:'world',
                counter:10
                
            }
        })
    </script>
</body>

hello
world
hello world
hello world
110

v-cloak

<style>
    [v-cloak]{
        display: none;
    }
</style>
    
    
    
</head>
<body>
    <div id="app" v-cloak><!--v-cloak在vue执行前存在，执行后消失，存在时控制标签样式-->
        {{name}}
    </div>
    <script src="../js/vue.js"></script>
    <script>
        setTimeout(function(){
            const app = new Vue({
                el :'#app',
                data :{
                    name : 'lihua'
                }
            })
        }, 1000);

    </script>
</body>
</html>

v-html

<body>
    <div id="app">
        <h1>{{url}}</h1>
        <h1 v-html = "url"></h1><!--使用v-html可以提取-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data() {
                return {
                    url :'<a href = "www.baidu.com">百度一下</a>',
                    attributeName: "href"
                }
            },
        })
    </script>
</body>

<a href = "www.baidu.com">百度一下</a>
百度一下

v-once

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h1 v-once>{{name}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                name:"lihua"
            }
        })
    </script>
</body>

v-pre

<body>
    <div id="app">
        <!-- 显示不用vue处理的内容 -->
        <h1 v-pre>{{name}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                name :'lihua'
            }
        })
    </script>
</body>

显示不用vue处理的内容

v-text

作用：获取标志为name的文本，但是会覆盖<h1>中的原有文本

<body>
    <div id="app">
        <h1 v-text = "name">111</h1><!--获取标志为name的文本，但是会覆盖<h1>中的原有文本-->
    </div>
    <script src="../js/vue.js"></script>
    <script>

        const app = new Vue({
            el :'#app',
            data :{
                name:'lihua'
            }
        })
    </script>

</body>

动态绑定属性(v-bind)

v-bind直接绑定

<body>
<div id="app">
    <a v-bind:href="src">baidu</a>
    <img v-bind:src="imgsrc" />
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el :'#app',
        data :{
            src : 'www.baidu.com',
            imgsrc: ''
        }
    })
</script>
</body>

百度一下

v-bind绑定类

<style>
    .avtive{
         color: aqua; 
    }
    .liner{
         color: aquamarine; 
    }
</style>


<body>
    <div id="app">
        <!-- class属性的设置为以下语法，avtive和liner为类，judge为Boolean判断是否开启类,v-bind可以用:缩写 -->
         <h1 v-bind:class ="getClasses()">你好啊</h1>
         <button v-on:click = "change" >按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                judge1 : false,
                judge2 : true
            },
            methods: {
                change: function(){
                    this.judge1 = !this.judge1;
                    this.judge2 = !this.judge2;
                },
                getClasses: function(){
                    return {avtive: this.judge1 , liner: this.judge2}//这是一个对象，对象名后面是布尔值
                }
            },
        })
    </script>
</body>

运行结果：（点击按钮颜色切换）

你好啊
按钮

<style>
    .aa{
        color: aqua;
    }
</style>


<body>
    <div id="app">
        <h2 :class="getClasses()">youcan</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                 active: 'aa' ,
                 liner: 'bb'
            },
            methods: {
              getClasses: function(){
                return [this.active,this.liner]
              }
            }  
        })
    </script>
</body>

使用v-bind绑定函数getclass()到<h2>中的类中.

计算属性(computed)

计算属性的复杂方法

<body>
    <div id="app">
        <h1>{{totalprice}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                books :[
                    { id:12 , name:'计算机编程' , price:119 },
                    { id:13 , name:'C++编程语言' , price:91 },
                    { id:14 , name:'Java编程入门' , price:89 },
                    { id:15 , name:'操作系统' , price:103 }
                ]
            },
            computed :{
                totalprice:function(){
                    let total = 0;
                    for(let i = 0; i<this.books.length ; i++){
                        total  +=  this.books[i].price;
                   }
                   return total;
                }
            },
        })
    </script>
</body>

计算属性通过循环直接返回所有书本的价格

计算属性的基本操作

<body>
    <div id="app">
        <h1>{{fullName}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                firstName:'li',
                lastName:'hua'
            },
            computed :{
                fullName:function(){
                    return this.firstName + ' '+ this.lastName;
                }
            }
        })
    </script>
</body>

返回字符串,此时fullname为: li hua

计算属性的setter和getter

<body>
    <div id="app">
        <h2>123</h2>
        <h2>{{fullname = "zhang shang"}}</h2>
        <h1>{{fullname}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el :'#app',
            data :{
                firstname:'li',
                lastname:'hua'
            },
            computed :{
                fullname:{
                    set(newValue){//传进来的形参，可用于更改
                      const names = newValue.split(' ')
                      this.firstname =  names[0]
                      this.lastname =  names[1]
                    },
                    get(){//获取return返回的值的函数
                        return this.firstname + ' ' + this.lastname
                    }
                }
            }
        })
    </script>
</body>

有了set方法之后,会接收newvalue形参进行处理,{{fullname = "zhang shang"}}即传入了zhang shang作为参数,最后结果为:
{{fullname = "zhang shang"}}: zhang shang
{{fullname}}: zhang shang

事件监听器(v-on)

v-on与事件对象

<body>
  <div id="app">
    <!--在一个函数传入参数的时候，事件（如点击按钮）会默认在第一个参数，但如果有多个参数，则可以用$event获取  -->
    <!-- 没有括号，获取默认event对象-->
    <button @click ="fun">按钮0</button>
    <!-- 有括号，不获取默认event对象 -->
    <button @click = "fun()">按钮1</button>
    <!-- 有括号，只传一个参数，不获取event对象 -->
    <button @click = fun(123)>按钮2</button>
    <!-- 未声明event是什么，vue内部报错,应该写为$event表示事件对象 -->
        <button @click = "fun(123,event)">按钮3</button>
    <!-- 第一个按钮，参数都有值，不传event对象 -->
    <button @click = "fun('game',123)">按钮4</button>
    <!-- 第二个按钮，参数中有$event，这$event为事件对象 -->
    <button @click = "fun('123',$event)">按钮5</button>
  </div>
  
  
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el :'#app',
        data :{

        },
        methods: {
          fun(x,e){
            console.log("+++++++",x,e);
            console.log(e.clientX);
          },
        },
      })
  </script>
</body>

@click ="fun" 获取到默认event对象,但是event对象为 fun(x,e)中的x
@click = "fun()"不获取默认event对象
@click = fun(123)有括号，只传一个参数，不获取event对象
@click = "fun(123,event)"未声明event是什么,应该写为event表示事件对象<br>@click="fun(′game′,123)"参数都有值，不传event对象<br>@click="fun(′123′,event表示事件对象<br> @click = "fun('game',123)"参数都有值，不传event对象<br> @click = "fun('123',event)"自然第二个参数就是默认event对象,event对象是fun(x,e)中的e,控制台正确输出e.clientX

event对象参考:developer.mozilla.org/zh-CN/docs/…

v-on的修饰符

<div id="app">

    <div @click = "fun1">
      <!-- stop的使用 -->
      <!-- 按钮1未设置stop属性，点击事件会冒泡，最终显示盒子和按钮被点击 -->
      <button @click = "fun2">按钮1</button>
      <!-- 按钮2设置stop属性，点击事件不会冒泡，最终显示按钮被点击  -->
      <button @click.stop = "fun2">按钮2</button>
      <br><br>
    </div>
    
    <!-- prevent的使用，取消默认事件（如点击下面按钮，） -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent = "subClick">
    </form>
    
    <!--键盘事件-松开事件  -->
    <div>
      <!-- 当松开某个键时，控制台输出keycode -->
      <input type="text" placeholder="please input!!!" @keyup = "key"><br>
      <!-- 使用修饰符enter，当enter键被松开的时候才会在控制台输出keycode -->
      <input type="text" placeholder="please input enter" @keyup.enter = "key"><br>
      <!-- once表示只触发一次 -->
      <input type="text" placeholder="只触发一次" @keyup.once  = "key">
    </div>
</div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el :'#app',
        data :{

        },
        methods: {
          fun1(){
            console.log("盒子被点击");
          },
          fun2(){
            console.log("按钮被点击");
          },
          subClick(){
            console.log("提交按钮被点击");
          },
          key(){
            console.log("keycode");
          }
        },
      })
  </script>

@click.stop可以防止事件的冒泡属性
@click.prevent取消事件的默认事件,.prevent 修饰符会调用 event.preventDefault() ，preventDefault 会停止浏览器的预设行为，像是 checkbox 的勾选/取消勾选行为、 form 的 submit 送出表单行为都会因为 preventDefault 而没有触发。

判断属性(v-else-if)

<body>
  <div id="app">
    <p v-if = "score>=90">成绩是90以上</p>
    <p v-else-if = "score>=80">成绩是80以上</p>
    <p v-else-if = "score>=70">成绩是70以上</p>
    <p v-else>成绩是70以下</p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el :'#app',
        data :{
          score:30,
        },
      })
  </script>
</body>

基本用法 v-if="..." , v-else-if="..." , v-else = "..."

循环(v-for)

v-for遍历数组

<body>
    <div id="app">
      <ul>
        <!-- in前面的item可以随便取名字，而in后面的movie是变量，index为索引值，可加可不加 -->
          <li v-for = "(item,index) in movie">{{index+1}}  {{item}}</li>
      </ul>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
          data: {
            messagee : '111',
            movie : ['星际穿越','雷神','经典传奇','海贼王']
          }
      })
    </script>
</body>

movies 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for遍历对象

<body>
  <div id="app">
    <ul>
      <!-- 获取value -->
      <li v-for = "item in person">{{item}}</li>
    </ul>
    <ul>
      <!-- (value,key)前面是value值，后面是key属性,因为一般value值比较重要，会居于前面,index可加可不加 -->
      <li v-for = "(value,key,index) in person" :key="key">{{index}}-{{key}}: {{value}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el :'#app',
        data :{
          person: {
            name: 'chen',
            age: 18,
            grade: 97
          }
        },
      })
  </script>
</body>

index为索引值,key为类名,value为类值
:key="唯一值",绑定 :key可以提高性能

高阶函数

filter()

let num = [123,56,897,66,254,56,100,123,12]
let x =  num.filter(function(n){
  return n<100
})
console.log(x)

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。这里过滤后控制台输出的的值全部<100

Map()

let num2 = [11,22,33,44]
let y = num2.map(function(n){
  return n*2
})
console.log(y)

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。按照原始数组元素顺序依次处理元素。

Reduce()

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

结果为:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
语法:arr.reduce(callback,[initialValue])\

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）
详见:blog.csdn.net/weixin_3661…

双向绑定(v-model)

<body>
  <div id="app">
    <!-- v=model可以实现双向绑定，在input修改绑定数据可以使vue里面的数据改变，vue改变也可以
    修改input里面的值 -->
    <input type="text" v-model = "message" />
    {{message}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el :'#app',
      data :{
        message: '你好'
      },
    })
  </script>
</body>

修改输入框内的字同时改变vue内部的data中的被绑定的值
相关:medium.com/pierceshih/…

avatar
文章
阅读
粉丝