ASCII码 ASCII码

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

发布于:2022-01-15 09:52:01  栏目:技术文档

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

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

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

里面带有了响应式数据更改的一部分代码" class="reference-link">里面带有了响应式数据更改的一部分代码

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

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

代码部分:

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

示例截图:

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

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

示例截图:

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

代码部分:

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

示例截图:

相关推荐
阅读 +