Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Vue入门基础知识点
Blogger Information
Blog 37
fans 1
comment 0
visits 32452
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue入门基础知识点
Jason Pu?
Original
1011 people have browsed it

一.vue数据插入:

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合,今天我就开始Vue入门学习之旅

  1.     //使用之前需要new一个vue的类
  2.     const vm = new Vue({
  3.         //设置挂载点:
  4.         el:'.app',
  5.         //数据注入:
  6.         data:{
  7.             //在data中声明的所有变量都会成为vue实例的属性:
  8.             username:'VueStudent',
  9.             greeting:false,//false会影响对应挂载点里面三元表达式的值
  10.         }
  11.     })

在html给vue创建一个根节点:

  1.     <div class="app">
  2.         <!-- {{里面的就是插值,可以接受表达式}} -->
  3.         <p>用户名:{{username}}</p>
  4.         <p>10+10={{10+10}}</p>
  5.         <p>greeting?‘上午好’:‘下午好’</p>
  6.     </div>

浏览器中的运行效果

二.v-html和v-once

v-text:相当于原生js中的innerText或者textContent
v-once:只渲染一次
例如我们在外面给在data中已经设置好的username重新赋值 

  1. vm.username="<em style='color:red; font-size:2em;'>SecondStudent</em>"

再写两个一个没有设置v-html和有设置的p标签:

  1. <div class="app">
  2.         <p>{{username}}</p>
  3.         <p v-html="username"></p>
  4.     </div>

运行后产生了不同的结果:

三.v-bind绑定style和class属性

1.绑定style:

  1.     <div class="app">
  2.         <!-- 用v-bind绑定了data中style1的值: -->
  3.         <p v-bind:style="style1">style:{{style}}</p>
  4.         <!-- v-bind可以简写成一个冒号“:” -->
  5.         <p :style="`color:red`">style:{{site}}</p>
  6.     </div>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.     <script>    
  9.     const vm = new Vue({
  10.         el:'.app',
  11.         data:{
  12.             site:'php中文网',
  13.             style1:"color:red",
  14.             class1:"active bigger",
  15.         }
  16.     })
  17.     </script>

由于第一个p标签绑定的style1的值和第二个p标签绑定的值一样,所以运行后得到相同的结果

2.绑定类

  1.     <style>
  2.         .active{
  3.             color:red;
  4.         }
  5.         .bigger{
  6.             font-size: 2rem;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.         <!-- 绑定类class属性 -->
  13.         <!-- 给里面的类绑定了style里面提前设置好的的.active和.bigger样式 -->
  14.         <p :class="`active bigger`" >class1:{{site}}</p>
  15.         <!-- 也可以绑定给data里面的class1,因为已经提前赋值好了 -->
  16.         <p :class="class1">class2:{{site}}</p>
  17.         <!-- 用对象设置开和关 -->
  18.         <p :class="{active:true, bigger:false}">class3:{{site}}</p>
  19.     </div>
  20.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  21.     <script>    
  22.     const vm = new Vue({
  23.         el:'.app',
  24.         data:{
  25.             site:'php中文网',
  26.             style1:"color:red",
  27.             class1:"active bigger",
  28.         }
  29.     })

以下是运行后的结果,可见对象里面的布尔值起到了作用

四.使用v-on绑定事件
我们可以使用v-on绑定绑定事件,格式是:```javascript
v-on:”事件名称”=”函数名称”

  2. **在js中事件常用的一些方法也可以添加到v-on后面,比如阻止事件冒泡,阻止元素默认行为,也可以用$event给事件对象传参,v-on可以简写成@**
  3. **当然,绑定事件的前提是,你先得在methods里面写好函数**
  4. ```javascript
  5.  <div class="app">
  6.         <!-- 这里用@简写了v-on,并阻止了默认事件和事件冒泡,并只能执行一次 -->
  7.         <p><a href="https://php.cn" @click.prevent.stop.once="show">点击显示网站名称</a></p>
  8.         <!-- 这里我们传入了事件对象的参数 -->
  9.         <button @click.stop="handle($event,100,200)">click</button>
  10.     </div>
  11.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  12.     <script>    
  13.     const vm = new Vue({
  14.         el:'.app',
  15.         data:{
  16.             site:"php中文网",
  17.         },
  18.         methods:{
  19.             show(){
  20.                 //这里的this指当前vue的实例对象
  21.                 alert(this.site)
  22.             },
  23.             handle(ev,a,b){
  24.                 //type是指事件类型
  25.                 console.log(ev.type,ev.target);
  26.                 console.log("%d+%d=%d",a,b,(a+b));
  27.             },
  28.         }
  30.     })
  31.     </script>

绑定写在methods里面的函数运行后,函数得到了执行:

五.使用v-model进行双向绑定

双向绑定指:修改页面当中的数据,模型中的数据也能跟着修改,例如以下代码:

  1.     <div class="app">
  2.         <p>模型中的数据:{{content}}</p>
  3.         <p>双向绑定: <input type="text" value="content" @keyup="content=$event.target.value"></p>
  4.     </div>
  5.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  6.     <script>    
  7.     const vm = new Vue({
  8.         el:'.app',
  9.         data:{
  10.             content:"php中文网",
  11.         }
  12.     })
  13.     </script>

因为这个方法经常使用,所以vue提供了语法糖:v-model,上面的代码可以直接简写:

  1. <p>双向绑定:<input type="text" v-model.lazy.number="content"> </p>

运行的结果显示我们确实成功的改变了模型中的值:

六.用v-for进行遍历

遇到集合数据的时候,可以用遍历进行显示,例如我们在data中分别创建一个数组,对象,数组对象,在页面中进行显示:

  1.  const vm = new Vue({
  2.         el:'.app',
  3.         data:{
  4.             //数组:
  5.             items:["天","地","人"],
  6.             //对象:
  7.             user:{
  8.                 name:"Jasper",
  9.                 psw:"123",
  10.             },
  11.             //对象数组:
  12.             users:[
  13.                 {id:1,name:"Jasper",psw:"123"},
  14.                 {id:2,name:"Peter", psw:"321"},
  15.                 {id:3,name:"Mary",psw:"666"},
  16.             ],
  17.         },
  18.     })

用v-for在li标签中进行遍历并显示:

  1. <ul>
  2.             <!-- 此处的item代表值,index是索引具有唯一性 -->
  3.             <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  4.         </ul>
  5.         <ul>
  6.             <!-- item:是对象的值,prop是键,index是索引,索引和键都具有唯一性 -->
  7.              <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
  8.         </ul>
  9.         <ul>
  10.             <li v-for="(user,index) in users" :key="user.id">{{user.id}}--{{user.name}}--{{user.psw}}</li>
  11.         </ul>

运行后成功的遍历并显示了,代替了重复的工作

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post