Vue，Vuejs基础1

2022-01-22 18:34:52 阅读：129 来源： 互联网

标签：el Vue Vuejs app 基础 new message data

Vuejs 初体验

创建了一个vue对象，传入了一些options:{}

{}包含了el属性：该属性表示这个Vue对象挂载到哪一个元素上

{}包含了data属性：该元素通常会存储一些数据，这些数据可以是直接定义出来的，也可以是从服务器加载的

<div id="app">{{message}}</div>
<script src="WEB-INF/lib/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',//用于挂载要管理的元素
        data:{ //定义数据
            message:'你好啊，李银河！'//响应式：当数据发生一些改变时，界面会跟着改变
        }
    })
</script>

Vue的列表显示

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:"你好啊",
            movies:['星际穿越','大话西游','少年派','盗梦空间'],
        }
    })
</script>

v-for可以遍历一个数组

小案例计数器

在这里插入图片描述

<body>
<div id="app">
    <h2>当前计数:{{counter}}</h2>
<!--<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add:function () {
             console.log("add被执行");
             this.counter++
            },
            sub:function () {
            console.log("sub被执行");
            this.counter--
            }
        }
    })
</script>

新的属性：methods,该属性用于在Vue对象中定义方法

新的指令：@click,该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法通常是method中定义的方法

Vue的生命周期

见另一篇博客总结

插值操作（掌握）

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},李银河！</h2>
    <!--mustache语法中，不仅可以直接写变量，也可以写简单的表达式-->
    <h2>{{firstname+lastname}}</h2>
    <h2>{{furstname+' '+lastname}}</h2>
    <h2>{{firstname}} {{lastname}}</h2>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            firstname:'kobe',
            lastname:'bryant'
        }
    })
</script>

插值操作–其他指令使用

v-once
该指令后面不需要跟任何表达式（不像v-for是需要跟表达式的）
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<h2 v-once>{{message}}</h2>

v-html
某些情况下我们从服务器请求到的数据本身就是一个html代码
如果直接通过{{}}来输出，会将html代码一起输出，但是我们可能希望按照html格式进行解析，并且显示对应的内容

<body>
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-html="url"></h2>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            url:'<a href="http://www.baidu.com">百度一下</a>'
        }
    })
</script>

v-bind

基本使用
语法糖：就是一个:
-v-bind指令主要用于响应式的更新html属性
一般我们要想在元素节点的属性上动态绑定vue的data数据

<body>
<div id="app">
    <img v-bind:src="imgURL" alt="">
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            imgURL:'https://profile.csdnimg.cn/9/4/A/3_qq_51817638'
        }
    })
</script>

v-bind动态绑定class属性
很多时候，我们希望动态的来切换class,比如当数据为某个状态时，字体显示红色
当数据为另一种状态时，字体显示黑色
绑定class有两种方式
对象语法：

<style>
    .active
    {
        color: red;
    }
</style>
<body>
<div id="app">
    <!--<h2 v-bind:class="{key1:value1,key2:value2}">-->
    <!--<h2 v-bind:class="{类名1:true,类名2:boolean}">-->
   <h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            isActive:true,
            isLine:true
        },
        methods:{
            btnClick:function () {
             this.isActive=!this.isActive
            }
        }
    })
</script>

数组语法：

<div id="app">
    <h2 v-bind:class="[active,line]">{{message}}</h2>
    <!--或者写成一个函数-->
    <h2 class="little"  v-bind:class="getClasses()">{{message}}</h2>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:'你好啊',
            active:'aaaa',
            line:'bbbbbb'
        },
        methods:
            {
                getClasses:function () {
                  return[this.active,this.line]
                }
            }
    })
</script>

v-bind动态绑定style(对象语法)

我们可以应v-bind:style来绑定一些css内联样式
style后面跟的是一个对象类型
对象的key是css属性名称
对象的value是具体赋的值，值可以来自data中的属性

v-for

基本使用

可以用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法，其中items是源数组，而item是被迭代的数组元素的别名

<ul id="example-1">
  <li v-for="item in items" >
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

在这里插入图片描述
在v-for块中，我们可以访问所有父作用域的property. v-for还支持一个可选的第二个参数，即当前项的索引

<ul id="example-2">
    <li v-for="(item,index) in items">{{parentMessage}}-{{index}}-{{items.message}}
    </li>
</ul>

   var example2=new Vue({
        el:'#example-2',
        data:{
            parentMessage:'parent',
            items:[
                {message:'Foo'},
                {message:'Bar'}
            ]
        }
    })

结果：
在这里插入图片描述
也可以用of代替in作为分隔符，因为它更接近javascript迭代器的语法

<div v-for="item of items"></div>

在v-for里使用对象
你也可以用v-for来遍历一个对象的property

<ul id='v-for-object' class='Demo'>
<li v-for="value in object">
{{value}}
</li>
</ul>

new Vue({
el:'#v-for-object',
data:{
object:{
title:'how to fo lists in Vue',
author:'Jane',
publishedAt:'2016-04-10'
}}
})

结果：
在这里插入图片描述
也可以提供第二的参数为property名称，也就是键名

<div v-for="{value,name} in object">
{{name}}:{{value}}
</div>

结果：
在这里插入图片描述
还可以用第三个参数作为索引：

<div v-for="{value,name,index} in Object">
{{index}}.{{name}}:{{value}}

结果：
在这里插入图片描述

v-bind和v-for结合的小案例

需求：点击列表选项，该选项变成红色，其余不变

<div id="app">
<ul>
    <li v-for="(item,index) in movies"
        :class="{active:currentIndex===index}"
        @click="liClick(index)">
        {{index}}.{{item}}
    </li>
</ul>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
            currentIndex:0
        },
        methods:{
            liClick(index)
            {
                this.currentIndex=index
            }
        }
    })
</script>

计算机属性

基本使用

模板内表达式非常方便，但它们适用于简单的操作，在模板中放置过多的逻辑会使它们变得臃肿且难以维护

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

至此，模板不再是简单声明性的了，不容易阅读，必须看它一秒才能意识到message是反向的当想在模板中包含多次反向消息，就要写很多遍，所以对于复杂的逻辑，应该使用计算机属性

div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                //split('')，将字符串以空格为界限切割为数组
                //如：split(',')以,为界限其人格成数组
                //join()方法用于把数组中的所有方法放入一个字符串，元素是通过指定分隔符进行分割的，指定分隔方法join('');
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

 - 计算机缓存与方法

我们同样可以在表达式中调用方法来获得相同的结果

<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们将相同的函数定义为方法而不是计算机属性，对于最终结果，这两种方法完全相同，但是不同之处在于计算机属性是根据它们的反应依赖来缓存的，计算属性仅仅在其某些反应性依赖项发生更改时才会重新评估，这意味着只要message没有更改，对于reversedMessage计算属性的多次访问将立即返回先前计算的结果，而无需再次运行该函数
相比之下，只要发生重新渲染，方法调用将始终运行该函数。
为什么我们需要缓存？可以想象一下，有一个昂贵的计算机属性A，它需要遍历一个巨大的Array并进行大量计算，然后我们可能有其他计算属性，这些属性又依赖于A，如果没有缓存，我们执行A的getter比比要的次数多的多。

计算机属性的setter和getter方法

<div id="app">{{ fullName }}</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            firstname:'nobe',
            lastname:'Bryant'
        },
        computed:{
           // fullName:function () {
             //  return this.firstname+this.lastname;
           // }
            //计算属性一般没有set方法，只读属性
            fullName:{
                set:function (newValue) {
                    console.log('-------');
                 const names=newValue.split(' ');
                 this.firstname=names[0];
                 this.lastname=names[1];
                },
                get:function () {
                   return this.firstname+' '+this.lastname;
                }
            }
        }
    })
</script>

结果：
在这里插入图片描述

块级作用域let和var

在ES5之前因为if和for没有块级作用域的概念，所以在很多时候，我们都必须要借助于function的作用域来解决应用外面变量的问题(闭包）
ES5中只有function有作用域

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
 var btns=document.getElementsByTagName("button");
 for(var i=0;i<btns.length;i++)
 {
     (function (num) {
          btns[num].addEventListener('click',function () {
              console.log('第'+num+'按钮被点击');
          })
     })(i)
 }
</script>

在ES6中加入了let,let它是有if和for的块级作用域

<script>
 var btns=document.getElementsByTagName("button");
/* for(var i=0;i<btns.length;i++)
 {
     (function (num) {
          btns[num].addEventListener('click',function () {
              console.log('第'+num+'按钮被点击');
          })
     })(i)
 }*/
    for(let i=0;i<btns.length;i++)
    {
        btns[i].addEventListener('click',function () {
             console.log('第'+i+'个按钮被点击');
        })
    }
</script>

v-on

基本使用和语法糖
利用v-on指令来监听事件，绑定事件监听器
语法糖：@
如果函数需要参数，但是没有传入，那么函数的形参为undefined

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

v-on的修饰符使用
最常见的需求是在事件处理程序中调用event.preventDefault()或者event,stopPropagation()

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

按键修饰符：
在监听键盘事件时，经常需要检查详细的按键

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--只有在$event.key等于PageDown时被调用-->
<input v-on:keyup.page-down="onPageDown">

v-if

基本使用

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值得时候被渲染

<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            isShow:true
        }
    })
</script>

也可以用v-else 添加一个"else"块

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else元素必须紧跟在带v-if或者v-else-i的元素的后面，否则它将不会被识别
v-else-if顾名思义，充当v-if的"else-if"块，可以连续使用

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

登录切换案例

<div id="app">
    <span v-if="isUser">用户账号</span>
    <span v-else>用户邮箱</span>
    <button  @click="isUser=!isUser">切换</button>
</div>

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

登录切换的input复用问题

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

紧接着上面的案例，如果在有输入内容的情况，切换了类型，我们会发现文字依然显示之前输入的内容，但是按照道理讲，我们应该切换到另一个input元素中了，但是在另一个元素中我们并没有输入内容
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能复用已经存在的元素，而不是重新创建新元素
在上面的案例中，用户在第一个input中输入的内容，直接复用到第二个input中
解决方法：只需添加一个具有唯一值的 key attribute 即可
案例：切换登录方式

<div id="app">
    <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号" key="username">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>
    <button @click="isUser=!isUser">切换</button>
</div>

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

v-show

基本使用
v-show和v-if的用法十分相似，也用于决定一个元素是否被渲染
v-if:当条件为false时，包含v-if指令的元素，根本就不会在dom中
v-show:当条件为false时，v-show只是给我们的元素添加一个行内样式，display:none
当需要在显示与隐藏之间切换很频繁时，使用v-show,当只有一次切换时，通过使用v-if

v-for

基本使用
遍历对象

<div id="app">
    <!--1.在遍历对象数组中，如果只是获取一个值，那么获取到的是value-->
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>
    <!--获取key和value--><!--格式：(value,key-->
    <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
    </ul>
    <!--获取key和value和index-->
    <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
</div>

```javascript
<script>
    const app=new Vue({
        el:'#app',
        data:{
            info:{
                name:'why',
                age:18,
                height:1.18
            }
        }
    })
</script>

## 数组中的一些响应式方法总结

```html
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            letters:['a','b','c','d']
        },
        methods:{
            btnClick(){
                //1.push方法
               // this.letters.push('aaa');
                //this,letters.push('aaa','bbb','ccc');
                //2.pop方法 删除数组中的最后一个元素
                //this.letters.pop();
                //3.shift() 删除数组中的第一个元素
                //this.letters.shift();
                //4.unshift() 在数组最前面添加元素
               // this.letters.unshift('aaa');
                //this.letters.unshift('aaa','bbb','ccc');可传多个值
                //5.splice()作用 ：删除/插入/替换元素
                //删除元素，第二个位置表示删除几个元素，如果没传，就从起始位置删到最后
                //替换元素：第二个参数，表示要替换几个元素，后面是用于替换前面的元素
                //插入元素：第二个参数传入0，并且后面跟上要插入的元素
                //splice(start,
                //this.letters.splice(1,3,'m','n','l','x');//替换
                //this.letters.splice(1,0,'x','y','z');//插入
                //排序
                //this.letter.sort();
                //反转
                //this.letters.reverse();
                //注意：Vue中通过索引值改变元素的值是非响应式的
                //this.letter[0]='bbbb';//界面是不会发生改变的
                //通过替换修改
                this.letters.splice(0,1,'bbbb');//从0的位置替换1个
                //通过set修改 set(要修改的对象，索引值，修改后的值)
                Vue.set(this.letters,0,'bbbbb');

            }
        }
    })
</script>

v-model

基本使用及原理
v-model指令用于双向绑定
v-model其实是一个语法糖，它的背后本质上是包含两个操作
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

<input type="text" v-model="message">
//等同于
<input type="text" v-bind:value="message" 
v-on:input="message=$event.target.value">

v-model结合radio类型使用

<div id="app">
    <label for="male">
        <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <h2>{{sex}}</h2>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            messages:"你好啊",
            sex:''
        }
    })
</script>

v-model结合checkbox使用
单选框

<div id="app">
  <!--checkbox的单选框-->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是:{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            messages:"你好啊",
            isAgree:false
        }
    })
</script>

复选框

<div id="app">
  <!--checkbox的单选框-->
   <!-- <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h2>您选择的是:{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>-->
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        <h2>您的爱好是:{{hobbies}}</h2>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            messages:"你好啊",
            isAgree:false,
            hobbies:[]
        }
    })
</script>

input的值绑定

<div id="app">
    <label v-for="item in originalHobbies" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好是{{hobbies}}</h2>
</div>

<script>
    const app=new Vue({
        el:'#app',
        data:{
            hobbies:[],
            originalHobbies:['篮球','足球','羽毛球','台球']
        }
    })
</script>

修饰符
lazy修饰符：v-model默认是在input事件中同步输入框的数据的
也就是说，一旦数据发生改变时对应的data中的数据就会自动发生改变，lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符:默认情况下。在输入框中无论我们输入的是字母还是数字，都会被当作数字处理，但是如果我们希望处理的是数字类型。那么最好直接将内容当作数字处理
number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符：如果输入的内容首尾有很多空格，通常希望将其取出，trim可以过滤掉内容两边的修饰符

未完待续

标签：el,Vue,Vuejs,app,基础,new,message,data
来源： https://blog.csdn.net/qq_51817638/article/details/122518955

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue，Vuejs基础1

Vuejs 初体验

Vue的列表显示

小案例计数器

Vue的生命周期

插值操作（掌握）

插值操作–其他指令使用

v-bind

v-for

v-bind和v-for结合的小案例

计算机属性

块级作用域let和var

v-on

v-if

v-show

v-for

v-model