search

博客列表 >学习了vue中数据的挂载，vue实例的编写，数据的注入，数据的响应及vue的html长久文本html解析指令和vue的样式绑定及class类的绑定，input事件在vue双向绑定并复习了es6中的原生绑定及按照触发者的形式绑定

学习了vue中数据的挂载，vue实例的编写，数据的注入，数据的响应及vue的html长久文本html解析指令和vue的样式绑定及class类的绑定，input事件在vue双向绑定并复习了es6中的原生绑定及按照触发者的形式绑定

卢先生
卢先生原创
2022年01月16日 14:46:04490浏览

vue四部曲：
1.挂载点
2.vue实例
3.数据注入
4.响应式
下面的代码中，没有响应式演示
演示1：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="https://unpkg.com/vue@next"></script>
  8.     <title>VUE动态组件</title>
  9. </head>
  11. <body>
  12.     <!-- //挂载点 -->
  13.     <h1 class="title">{{message}}</h1>
  14.     <script>
  15.         // es6语法
  16.         // document.querySelector(".title").textContent = "hello word";
  17.         //es6的写法权重好像比vue高，如果不注释，就是es6生成的结果
  18.         //vue3
  19.         // vue
  20.         // vue实例
  21.         const app = Vue.createApp({
  22.             // 配置项是一个对象字面量
  23.             data() {
  24.                 return {
  25.                     message: "你好啊",//页面结果将显示你好啊
  26.                 };
  27.             },
  28.         }).mount(".title"); //挂载关联点
  29.     </script>
  30. </body>
  32. </html>

演示2：
vue的与es6关系来源追溯

里面带有了响应式数据更改的一部分代码

vue的代码块由插件vue3 snippets生成
代码部分：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="https://unpkg.com/vue@next"></script>
  8.     <title>vue动态组件之挂载点/vue实例/数据注入/响应式</title>
  9. </head>
  11. <body>
  12.     <!-- 下面的这个div.class就是一个挂载点 -->
  13.     <div class="ad">
  14.         <p>用户名：{{username}}</p>
  15.     </div>
  16. </body>
  17. <script>
  18.     // vue实例
  19.     // 声明一个变量 是vue的配置项
  20.     // vue中的变量/数据全部写入data方法中
  21.     const config = {
  22.         // 上面是创建了一个data函数 返回里面的 数值
  23.         data() {
  24.             return {
  25.                 username: "老卢",
  26.             };
  27.         },
  28.     };
  29.     const app = Vue.createApp(config).mount(".ad");
  30.     console.log(app);
  31.     // 与vue实例中的页面中的挂载点挂载
  32.     // app.mount(document.querySelector(".ad")); 简写
  33.     // 下面的进一步简化操作可以直接扔到声明的app后面//代码第28行
  34.     // let vuename = app.mount(".ad"); //如果要使用挂载点的内容时，需要给挂载点声明一个变量，通过变量去访问变量中的属性
  35.     //数据注入
  36.     // 第一种是简写
  37.     console.log(app.username);
  38.     // 第二种访问方式
  39.     console.log(app.$data.username); //通过对象来访问 需要给对象增加一个$符号,老实说是通过app映射到$data中访问的
  40.     //响应式改变
  41.     app.username = "老王";
  42.     console.log(app.username);
  43.     /////////下面是通过访问器属性来看////////不涉及到vue,意思就是vue的实现方法////
  44.     // 用访问器属性来访问
  45.     // 先声明一个变量
  46.     const obj = {
  47.         // 这里是创建了一个对象data 对象里面增加了键值
  48.         $data: {
  49.             email: "123456@qq.com",
  50.         },
  51.         // 创建一个方法,通过方法创建里面的data的键和值
  52.         get email() {
  53.             return this.$data.email;
  54.         },
  55.     };
  56.     console.log(obj.$data.email);
  57.     // 通过访问器属性访问当前data里面的值
  58.     console.log(obj.email);
  59. </script>
  61. </html>

演示图：

vue指令 以v-为前缀的一组指令，写到html标签的属性位置上
本质上就是自定义的属性

代码 示例 说明
v-text <p><span v-text="username"></span></p> 将数值解析成文本
v-html <p><span v-html="username"></span></p> 将写入的代码解析成html
v-once <p><span v-once>{{username}}</span></p> 一次性显示，只显示第一次赋值的内容
v-bind v-bind:style=”style” 自定义属性

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="https://unpkg.com/vue@next"></script>
  8.     <title>v-text/v-html/v-once</title>
  9. </head>
  11. <body>
  12.     <div class="app">
  13.         <p>用户名:{{username}}</p>
  14.         <p><span v-text="username"></span></p>
  15.         <p><span v-html="username"></span></p>
  16.         <p><span v-once>{{username}}</span></p>
  17.         <!-- v-text是通过v-text来控制当前标签中的内容,v-text的行为就是js代码来控制,而且一定是js代码 -->
  18.         <!-- 通过v-text的js把当前js里面的内容渲染到当前的span标签中 -->
  19.         <!-- 很像 event.textContent -->
  20.         <!-- 当v-html来控制当前标签中内容时,会将js代码中的部分解析成html -->
  21.         <!-- 很像innnerHTML -->
  22.         <!-- ///////下面使用v-once来看 -->
  23.     </div>
  24. </body>
  25. <script>
  26.     const app = Vue.createApp({
  27.         data() {
  28.             return {
  29.                 username: "admin",
  30.             };
  31.         },
  32.     }).mount(".app");
  33.     app.username = '<span style="color:red">牛年发大财 v-html效果 </span>';
  34. </script>
  36. </html>

示例截图：

vue的样式绑定/对象/数组/变量
代码部分：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <script src="https://unpkg.com/vue@next"></script>
  8.     <title>vue的样式绑定与事件绑定</title>
  9. </head>
  10. <style>
  11.     .active {
  12.         color: orange;
  13.     }
  15.     .bgc {
  16.         background-color: green;
  17.     }
  18. </style>
  20. <body>
  21.     <div class="app">
  22.         <!-- 样式绑定 -->
  23.         <!-- 行内样式 style -->
  24.         <!-- 使用v-bind绑定行内样式 简化是:冒号 -->
  25.         <p style="color: red">未添加行内样式</p>
  26.         <!-- 修改方法如下： -->
  27.         <p v-bind:style="style">行内样式v-bind</p>
  28.         <!-- 当样式比较多的时候解决方法 -->
  29.         <!-- 参数的键改为“-”驼峰式 值用一个变量替换掉 也就是改掉  -->
  30.         <!-- 当数据多于1个时，要考虑使用数组或者对象封装，这里用的是对象封装一下 -->
  31.         <p v-bind:style="{color:textcolor,backgroundColor:bgcColor}">
  32.             行内样式v-bind当样式比较多的时候解决方法,参数的键改为“-”驼峰式 值用一个变量替换掉 也就是改掉
  33.         </p>
  34.         <!-- 当样式中 前面三个是基础样式，后面三个是定制样式该如何做呢？这里使用数组样式来实现 -->
  35.         <!-- 比如button中 -->
  36.         <!-- 当数组前面第一个值是基础样式，第二个值为定制样式时 -->
  37.         <!-- 在实例中的写法 是数组内的变量在vue实例中是一个对象  具体请看vue实例中的写法 -->
  38.         <button :style="[btn,btnc]">提交</button>
  40.         <!-- class样式 -->
  41.         <!-- 下面这个写法中，也可使用''字面量来写，比如<p :class="'active'">但是不建议 -->
  42.         <!-- 直接写带vue实例中 -->
  43.         <p :class="active">vue中的class样式</p>
  44.         <!-- 判断active是否有效 可以使用isActive来测试，当isActive为true时有效，当为false中无效，这里写到实例中了 -->
  45.         <p :class="{'active':isActive}">vue中的class样式</p>
  46.         <!-- 以对象的写法 这里为什么可以简写？当初老师说的嘛 ，他值就等于他的值 -->
  47.         <p :class="{active,bgc}">vue中class以对象的写法</p>
  48.         <!-- 下面是数组绑定样式 -->
  49.         <p :class="['active','bgc']">vue中class以数组的写法</p>
  50.         <!-- 如何在数组中使用变量值呢？ 其实也简单，就类似对象一样，在实例中创建2个变量咯 -->
  51.         <p :class="[active,bgc]">vue中class以数组中变量的写法</p>
  52.     </div>
  53. </body>
  54. <script>
  55.     const app = Vue.createApp({
  56.         data() {
  57.             return {
  58.                 style: "color:green",
  59.                 textcolor: "red",
  60.                 bgcColor: "green",
  62.                 btn: {
  63.                     width: "5em",
  64.                     height: "5em",
  65.                     border: "0px",
  66.                 },
  67.                 btnc: {
  68.                     backgroundColor: "green",
  69.                     color: "#fff",
  70.                     cursor: "pointer",
  71.                 },
  73.                 active: "active",
  74.                 bgc: "bgc",
  75.                 isActive: true,
  76.                 active: "active",
  77.                 bgc: "bgc",
  78.             };
  79.         },
  80.     }).mount(".app");
  81. </script>
  83. </html>

示例截图：

input事件的双向绑定
在input事件双向绑定时，使用了js中的es6的原生写法绑定，
第二种写法使用了event获取触发者绑定
第三种是vue中的语法糖绑定，使用了v-model代码来实现的
第四种，是类似set定时器，但不是，他需要回车按下或者tab按下失去焦点时触动，代码：.lazy

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vue双向绑定</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  11. <body>
  12.     <!-- es6原生绑定 -->
  13.     <p>
  14.         <div>es6</div>
  15.         <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
  16.     </p>
  17.     <!-- vue写法 -->
  18.     <div class="app">
  19.         <p>
  20.             <div>vue绑定1-input</div>
  21.             <!-- vue中绑定事件用v-on来绑定事件 -->
  22.             <!-- vue中事件对象必须加一个$符号，比如event 就必须加一个$,使用$event -->
  23.             <!-- 下面这个掺杂了一点es6的想法 -->
  24.             <input type="text" v-on:input="comment = $event.target.value  " :value="comment"><span>{{comment}}</span>
  25.         </p>
  26.         <p>
  27.             <!-- vue中事件有一个语法糖，语法糖的写法更简单 -->
  28.             <div>vue绑定2-v-model-input</div>
  29.             <!-- 直接在当前input框中 加入v-model绑定变量即可 -->
  30.             <input type="text" v-model="comment" :value="comment"><span>{{comment}}</span>
  31.         </p>
  32.         <p>
  33.             <div>vue绑定2-v-model.lazy-input</div>
  34.             <!-- 延迟绑定 使用lazy，别名，懒绑定，类似set的定时器 -->
  35.             <!-- 直接在v-model后面增加一个.lazy，例如v-model.lazy -->
  36.             <input type="text" v-model.lazy="commentt" :value="commentt"><span>{{commentt}}</span>
  37.         </p>
  38.     </div>
  39. </body>
  40. <script>
  41.     const app = Vue.createApp({
  42.         data() {
  43.             return {
  44.                 comment: "",
  45.                 commentt: ""
  46.             }
  47.         },
  49.     }).mount(".app")
  50. </script>
  52. </html>

示例截图：

上一条：CSS基础1：元素样式来源，选择器，权重下一条：使用阿里云镜像站NTP服务搭建NTP服务器（基于CentOS 7系统）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多