search

博客列表 >vue学习之路（认识vue，挂载点，数据注入，响应式，学习一组指令）

vue学习之路（认识vue，挂载点，数据注入，响应式，学习一组指令）

培(信仰)
培(信仰)原创
2021年02月15日 06:35:56769浏览

vue学习之路（认识vue，挂载点，数据注入，响应式，学习一组指令）

认识vue

Vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用。Vue 的核心库只关注视图层，完全能够为复杂的单页应用提供驱动

  1.     <h2 class="title">{{words}}</h2>
  2.     <!-- 1. 原生 -->
  3.     <!-- <script>
  4.       document.querySelector(".title").textContent = "hello world";
  5.     </script> -->
  7.     <!-- 2. jQuery -->
  8.     <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  9.     <script>
  10.       $(".title").text("hello world...");
  11.     </script> -->
  13.     <!-- 3. vue -->
  14.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15.     <script>
  16.         const vm = new Vue({
  17.             el:document.querySelector('.title'),
  18.             data:{
  19.                 words: 'hello world~~~',
  20.             }
  21.         })
  22.         //vue 需要在页面上用两个{{}}做挂载点
  23.     </script>

vue 不能挂载到html和body上

什么是挂载点，数据注入和响应式

  1.     <!-- 创建一个vue根节点 -->
  2.     <div class="app">
  3.       <!-- 这里的所有内容都可以用vue实例进行管理 -->
  4.       <!-- 插值就是一个数据占位符 -->
  5.       <!-- <p>用户名：{{插值表达式}}</p> -->
  6.       <p>用户名：{{username}}</p>
  7.       <!-- 插值表达式可以使用表达式 -->
  8.       <p>{{username+', 同学你吃了吗？'}}</p>
  9.       <p>10 + 30 = {{10 + 30}}</p>
  10.       <!-- 还支持三元表达式 -->
  11.       <p>{{flag ? '上午好' : '下午好'}}</p>
  12.     </div>
  14.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15.     <script>
  16.       const vm = new Vue({
  17.         //当前vue的配置项
  18.         //挂载点
  19.         // el: ".app",
  20.         el: document.querySelector(".app"),
  21.         //数据注入
  22.         data: {
  23.           username:'tp',
  24.           flag: true,
  25.         },
  26.       });
  27.       // 如何拿到data中的数据呢，有时会做其他处理, 在变量前面加$
  28.       // console.log(vm.$data.username);
  29.       // 在data中声明的所有的变量都自动成为vue实例的属性
  30.       // 以上的过程叫数据注入；就是将vm实例中的数据（变量）添加到dom的数据占位符中操作（过程）。
  31.       // console.log(vm.username);
  33.       // vm.username = 'TJ';
  34.     </script>

学习一组指令

v-text,v-once,v-html

  1.     <div class="app">
  2.       <p>用户名：{{username}}</p>
  3.       <!-- v-text在HTML中不存在这样的属性，应该叫自定义属性，
  4.       专门由vue实例管理的 -->
  5.       <!-- v-text 等价于 innerText,textContent -->
  6.       <!-- <p v-text="username"></p> -->
  7.       <!-- 如果只想渲染一次需要使用v-once -->
  8.       <!-- <p v-once="username">只渲染一次</p> -->
  10.       <!-- v-html 等价于 innerHTML -->
  11.       <p v-html="username"></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: document.querySelector(".app"),
  17.         data: {
  18.           username: "TJ",
  19.         },
  20.       });
  22.       vm.username = '<em style="color:red">xm</em>';
  23.     </script>

v-bind,v-on

  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-bind,v-on</title>
  7.     <style>
  8.       .active {
  9.         color: violet;
  10.       }
  11.       .bigger {
  12.         font-size: 2rem;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <div class="app" onclick="alert(this.tagName)">
  18.       <!-- 一般写法 -->
  19.       <p style="color: red">普通行内style:{{site}}</p>
  20.       <p v-bind:style="style1">style 表达式:{{site}}</p>
  21.       <!-- v-bind:是高频指令，可以简写为 ：  -->
  22.       <p :style="'color:red'">style 字符串:{{site}}</p>
  23.       <!-- 推荐使用反引号，便于字符串拼接 可以直接解析变量-->
  24.       <p :style="`color:red`">style 反引号:{{site}}</p>
  25.       <!-- 绑定类 -->
  26.       <!-- 1. 如果没有v-bind指令，表达式只能是字符串 -->
  27.       <!-- <p v-bind:class="表达式"></p> -->
  28.       <!-- <p :class="`active bigger `">class1：{{site}}</p> -->
  29.       <!-- <p :class="class1">类变量（表达式）：{{site}}</p>
  30.       <p :class="{active: isActive,bigger: isBigger}">
  31.         类变量（优化，使用true，false控制状态）：{{site}}
  32.       </p>
  33.       <p :class="[`active`,`bigger`]">绑定类-支持数组：{{site}}</p>
  34.       <p :class="[{active},{bigger}]">绑定类-支持数组内变量：{{site}}</p> -->
  35.       <!-- 绑定事件 v-on-->
  36.       <p>
  37.         <a href="https://php.cn" v-on:click="show">显示网站名称（可以跳转）</a>
  38.       </p>
  39.       <!-- 阻止a标签的默认跳转行为 -->
  40.       <!-- 事件修饰符prevent:阻止元素的默认行为 -->
  41.       <!-- v-on:也是高频指令，可以简写为 @ -->
  42.       <p>
  43.         <a href="https://php.cn" v-on:click.prevent="show"
  44.           >显示网站名称（阻止默认跳转）</a
  45.         >
  46.       </p>
  47.       <p>
  48.         <a href="https://php.cn" @click.prevent="show"
  49.           >显示网站名称（阻止默认跳转-使用v-on简写@）</a
  50.         >
  51.       </p>
  52.       <p>
  53.         <a href="https://php.cn" @click.prevent.stop="show"
  54.           >显示网站名称（阻止默认跳转-阻止冒泡）</a
  55.         >
  56.       </p>
  58.       <!-- 仅允许执行一次 -->
  59.       <p>
  60.         <a href="https://php.cn" @click.prevent.stop.once="show"
  61.           >显示网站名称（仅一次）</a
  62.         >
  63.       </p>
  64.       <!-- 事件方法的传参 -->
  65.       <!-- 事件对象的参数名必须是$event -->
  66.       <button @click.stop="handle($event, 100, 200)">click</button>
  67.     </div>
  68.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  69.     <script>
  70.       const vm = new Vue({
  71.         el: document.querySelector(".app"),
  72.         data: {
  73.           site: "php",
  74.           style1: "color:red",
  75.           class1: "active bigger ",
  76.           isActive: false,
  77.           isBigger: true,
  78.           active: "active",
  79.           bigger: `bigger`,
  80.         },
  81.         methods: {
  82.           show() {
  83.             // this: 就是当前的vue实例
  84.             alert(this.site);
  85.           },
  86.           handle(ev, a, b) {
  87.             console.log(ev.type, ev.target);
  88.             console.log("a + b = %d", a + b );
  89.             console.log(`${a} + ${b} = ${a + b} ` );
  90.           },
  91.         },
  92.       });
  93.     </script>
  94.   </body>
  95. </html>

v-bind: 简写为 “：” ，绑定元素的属性 :style，:class等
v-on: 简写为 “@”，@click, @input, @change等 ,修饰符 @click.prevent.stop.once

v-model双向绑定

  1.     <div class="app">
  2.       <p>模型数据：{{site}}</p>
  3.       <p>单向绑定（模型数据改变页面数据跟着一起变）：{{site}}</p>
  4.       <p>
  5.         双向绑定（模型数据改变页面数据跟着一起变，页面数据改变模型数据一起变化）：
  6.         <input type="text" :value="site" @input="site=$event.target.value" />
  7.       </p>
  8.       <!-- 使用v-model实现双向绑定，不用书写以上 :value="site" @input="site=$event.target.value" -->
  9.       <!-- 双向绑定修饰符 lazyLoad-->
  10.       <p>
  11.         双向绑定（模型数据改变页面数据跟着一起变，页面数据改变模型数据一起变化,v-model.lazy）：
  12.         <input type="text" v-model.lazy = "site" />
  13.       </p>
  15.       <p>
  16.         双向绑定（模型数据改变页面数据跟着一起变，页面数据改变模型数据一起变化,v-model.number）：
  17.         <input type="text" v-model.number = "num" />
  19.       </p>
  20.       <p>{{typeof num}}</p>
  22.     </div>
  23.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  24.     <script>
  25.       const vm = new Vue({
  26.         el: document.querySelector(".app"),
  27.         data: {
  28.           site: "PHP",
  29.           num: 0,
  30.         },
  31.       });
  32.     </script>

注意v-model修饰符 v-model.lazy,v-model.number

v-for,key

  1.     <div class="app">
  2.       <ul>
  3.         <!-- key:可以干预diff算法 -->
  4.         <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染，以提升效率 -->
  5.         <!-- 只要用了v-for 就一定要绑定key:不重复的字符串或者整数 -->
  6.         <li v-for="(item,index) in items" :key="index">
  7.           {{index}}----{{item}}
  8.         </li>
  9.       </ul>
  10.       <ul>
  11.         <li v-for="(item,prop,index) in user" :key="prop">
  12.           {{prop}}----{{index}}----{{item}}
  13.         </li>
  14.       </ul>
  15.       <ul>
  16.           <li v-for="(user,index) in users" :key="user.id">{{user.id}}----{{user.name}}----{{user.email}}</li>
  17.       </ul>
  18.       <span v-for="(n,i) in 10" :key="i">{{i}}--{{n}}<br></span>
  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.           // 数组
  26.           items: ["合肥", "苏州", "杭州"],
  27.           //   对象
  28.           user: {
  29.             name: "tp",
  30.             email: "tp@php.cn",
  31.           },
  32.           //   对象数组，数据表的查询结果就是一个这样的二维json
  33.           users: [
  34.             { id: 1, name: "tp", email: "tp@php.cn" },
  35.             { id: 2, name: "mj", email: "mj@php.cn" },
  36.             { id: 3, name: "xm", email: "xm  @php.cn" },
  37.           ],
  38.         },
  39.       });
  40.     </script>

注意：使用v-for一定要绑定:key,key要求不重复的字符串或者整数；另外需要注意参数的顺序
数组：v-for=”(item,index) in items” :key=”index”
对象：v-for=”(item,prop,index) in user” :key=”prop”
对象数组：v-for=”(user,index) in users” :key=”user.id”

上一条：第3章 0127-常用运算与流程控制，学心得、笔记（表达式、三元运算与null合并运算符、字符串拼装、字符串的插值、、if语句简化、switch简化、foreach循环数组、文件包含）下一条：10M独享带宽,能承受多少人下载文件?
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多