Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vue入门基础知识整理
Blogger Information
Blog 41
fans 0
comment 0
visits 41124
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入门基础知识整理
幸福敲门的博客
Original
2051 people have browsed it

将课上提及的vue指令全部上机操作并发布

一、初识vue

1.1引入vue.js
官网：vuejs.org
开发版本：包含完整的警告和调试模式
生产版本：删除了警告，体积更小
1.2引入vue.js后，给我们提供了一个构造函数 Vue
1.3在js中，new Vue()
1.4new Vue() 后会返回一个vue实例对象，我们用变量接着它
1.5const vm = new Vue()
1.6传递一个配置对象{} – > const vm = new Vue({})

二、 el

类型： 字符串
全称：element（元素）
作用：配置控制的元素，表示Vue要控制的区域，值为css选择器

三、data

类型：对象
作用：存放要用到的数据，数据为响应式的
四、插值表达式
使用方法： {{ }}
可以将vue中的数据填在插值表达式中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>山河无恙,人间皆安!</title>
  7. </head>
  8. <body>
  9.     <h2 class="title">{{message}}</h2>
  10.     <script>
  11.         // 1. 原生
  12.         // document.querySelector('.title').textContent = '山河无恙,人间皆安!';
  13.     </script>
  15.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  16.     <script>
  17.         // 2. jquery
  18.         // $('.title').text('山河无恙,人间皆安! ...');
  19.     </script>
  21.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  22.     <script>
  23.         // 3. Vue
  24.         const vm = new Vue({
  25.             el: document.querySelector('.title'),
  26.             data: {
  27.                 message: '山河无恙,人间皆安!',
  28.             }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

图示：
VUE插值

五、课上提及的vue指令全部上机操作并发
5.1挂载点、插值、响应式

  1. <body>
  2.     <!-- 创建一个vue根节点 -->
  3.     <div class="app">
  4.         <!-- 插值就是一个数据占位符 -->
  5.         <p>用户名: {{admin}}</p>
  6.         <p>{{admin + ', 中国女孩'}}</p>
  7.         <p>97 + 98 = {{ 97 + 98}}</p>
  8.         <p>{{60 ? '及格' : '补考'}}</p>
  9.     </div>
  10.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.     <script>
  12.         const vm = new Vue({
  13.             // 当前的vue的配置顶
  14.             // 挂载点
  15.             // el: document.querySelector('.app'),
  16.             el: '.app',
  17.             // 数据注入
  18.             data: {
  19.                 admin: '百度贴吧项目经理',
  20.                 flag: false,
  21.             }
  22.         })
  23.         console.log(vm.$data.admin);
  24.         // 在data中声明的所有变量都自动成为vue实例的属性
  25.         // 以上的过程就是:数据注入
  26.         console.log(vm.admin);
  27.         vm.username = '新浪爱问客服';
  28.     </script>
  29. </body>

图示：
挂载点、插值、响应式

5.2v-text,v-once,v-html三个指令

v-text: 输入text文档（类似于innerText, textContent）
v-once:只渲染一次;随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
v-html:可以解析html代码（类似于innerHtml)

  1. <body>
  2.     <div class="app">
  3.         <p>用户名: {{admin}}</p>
  4.         <!-- v-text: 由专门由vue实例管理的自定义属性,称之为"指令" -->
  5.         <!-- v-text ===> innerText, textContent  -->
  6.         <!-- <p v-text="username"></p> -->
  7.         <!-- <p v-once="username">只渲染一次</p> -->
  8.         <!-- v-html: innerHTML -->
  9.         <p v-html="admin"></p>
  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.                 admin: "北京你好！",
  17.             },
  18.         })
  19.     vm.admin = '中国伟大';
  20.    </script>
  21. </body>

图示：
v-html

5.3v-bind,v-on两个指令

绑定事件
<!-- <p><a href="https://php.cn" v-on:click="show">显示网站名称1</a></p> -->
<!-- 下面就阻止a标签的默认跳转行为 -->
<!-- 事件修饰符prevent:防止元素的默认行为 -->
<!-- v-on也是高频指令,可以简写为: @ -->
<!-- <p><a href="https://php.cn" @click.prevent="show">显示网站名称2</a></p> -->
<!-- stop:阻止冒泡 -->
<!-- <p><a href="https://php.cn" @click.prevent.stop="show">显示网站名称3</a></p> -->
<!-- 仅允许执行一次 -->
<!-- <p><a href="https://php.cn" @click.prevent.stop.once="show">显示网站名称仅一次</a></p> -->
<!-- 事件方法的传参 -->
<!-- 事件对象的参数名必须是 $event -->

  1. <body>
  2.     <div class="app" onclick="alert(this.tagName)">
  3.         <!-- 绑定style属性 -->
  4.         <p v-bind:style="style1">style: {{itm}}</p>
  5.         <!-- v-bind:是高频指令可简写成冒号 -->
  6.         <p :style="`color:Blue`">style: {{itm}}</p>
  7.         <!-- 绑定类class属性 -->
  8.         <p :class="`active bigger`">class1: {{itm}}</p>
  9.         <p :class="class1">class2: {{itm}}</p>
  10.         <p :class="{active: isActive, bigger: isBigger}">class3: {{itm}}</p>
  11.         <p :class="[`active` ,`bigger`]">class4: {{itm}}</p>
  12.         <button @click.stop="handle($event, 100, 200)">click</button>
  13.     </div>
  14.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15.     <script>
  16.         const vm = new Vue({
  17.             el: '.app',
  18.             data: {
  19.                 itm: '新华网',
  20.                 style1: 'color:green',
  21.                 class1: `active bigger`,
  22.                 isActive: true,
  23.                 isBigger: false,
  24.             },
  25.             methods: {
  26.                 show() {
  27.                     // this: 就是当前的vue实例对象
  28.                     alert(this.site)
  29.                 },
  30.                 handle(ev, a, b) {
  31.                     console.log(ev.type, ev.target);
  32.                     console.log("%d + %d = %d", a, b, (a + b));
  34.                 }
  35.             },
  36.         })
  37.     </script>
  38. </body>

图示：
v-bind,v-on两个指令
5.4模型中的数据双向绑定

  1. <body>
  2.     <div class="app">
  3.         <p>模型中的数据: {{admin}}</p>
  4.         <p></p>
  6.         <!-- <p>双向绑定: <input type="text" :value="site" @input="site=$event.target.value"></p> -->
  7.         <!-- 因为这种双向绑定比较常用,vue提供了一个语法糖 -->
  8.         <!-- v-mode="site", ====> @input="site=$event.target.value" -->
  9.         <p>双向绑定: <input type="text" v-model.lazy="admin"></p>
  10.         <p>双向绑定: <input type="text" v-model.number="tab"></p>
  11.         <p>{{typeof tab}}</p>
  12.     </div>
  13.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.     <script>
  15.         const vm = new Vue({
  16.             el: '.app',
  17.             data: {
  18.                 admin: '百度',
  19.                 tab: "0",
  20.             }
  21.         })
  23.         // vm.site = 'php.cn'
  24.     </script>
  25. </body>

图示：
模型中的数据双向绑定
5.5v-for, key两个值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>v-for, key</title>
  7. </head>
  8. <body>
  9.     <div class="app">
  10.         <!-- key: 可以干预diff算法 -->
  11.         <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 -->
  12.         <!-- key只能是整数或不重复的字符串 -->
  13.         <ul>
  14.             <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
  15.         </ul>
  16.         <ul>
  17.             <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
  18.         </ul>
  19.         <ul>
  20.             <li v-for=" (user, index) in users" :key="user.id">{{user.id}}--{{user.name}}--{{user.email}}</li>
  21.         </ul>
  22.         <span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span>
  23.     </div>
  24.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  25.     <script>
  26.         const vm = new Vue({
  27.             el: ".app",
  28.             data: {
  29.                 // 数组
  30.                 items: ["北京", "通州", "宋庄"],
  31.                 // 对象
  32.                 user: {
  33.                     name: "幸福敲门",
  34.                     email: "xfqm@sina.com.cn",
  35.                 },
  36.                 //   对象数组, 数据表的查询结果就是一个二个这样的二维的JSON
  37.                 users: [
  38.                     { id: 1, name: "黄蓉", email: "hr@sina.cn" },
  39.                     { id: 2, name: "郭靖",  email:"gj@sina.cn" },
  40.                     { id: 3, name: "欧阳锋",  email:"oyf@sina.cn" },
  41.                     { id: 4, name: "黄药师",  email:"hys@sina.cn" },
  42.                     { id: 5, name: "杨过",  email:"yg@sina.cn" },
  43.                 ],
  44.             },
  45.         });
  46.     </script>
  47. </body>
  48. </html>

图示：
v-for, key两个值

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