search

博客列表 >vue入门基础知识整理

vue入门基础知识整理

幸福敲门的博客
幸福敲门的博客原创
2021年01月18日 13:04:092047浏览

将课上提及的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两个值

上一条：使用jQuery实现购物车全选/全不操作、 选中与不选中商品购物车都会自动计算下一条：购物车案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多