Blogger Information
Blog 119
fans 3
comment 1
visits 94667
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue常用术语、常用指令实例演示
赵大叔
Original
546 people have browsed it

vue 常用术语

  • vue 安装,推荐 cdn:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  • 挂载点:vue 实例的作用域,个人理解为容器
  • vue 实例,Vue.createApp({})=>创建 vue 实例,括号中配置项为对象字面量,app.mount 将 vue 实例与页面中的挂载点元素绑定
  • 数据注入:通过访问器属性来实现
  • 响应式:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  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>
  10. <body>
  11. <!-- 1. 挂载点 -->
  12. <div class="app">
  13. <p>用户名: {{username}}</p>
  14. </div>
  15. <script>
  16. // 2. vue 实例
  17. const app = Vue.createApp({
  18. // vue中的变量/数据全部写到data方法中
  19. data() {
  20. return {
  21. username: "Help",
  22. };
  23. },
  24. }).mount(".app"); // 默认调用,document.querySelector方法
  25. // 将vue实例与页面中的挂载点元素绑定
  26. // app.mount(document.querySelector(".app"))
  27. console.log(app);
  28. // 3. 数据注入
  29. console.log(app.$data.username);
  30. console.log(app.username);
  31. // 用访问器属性来实现
  32. const obj = {
  33. $data: {
  34. email: "Help10086@foxmail.com",
  35. },
  36. // 访问器属性
  37. get email() {
  38. return this.$data.email;
  39. },
  40. };
  41. console.log(obj.$data.email);
  42. console.log(obj.email);
  43. // 4. 响应式,避免在原代码中修改
  44. app.username = "DASHU";
  45. </script>
  46. </body>
  47. </html>

vue 常用指令演示

  • vue 指令: v-为前缀的一组指令,写到 html 标签的属性位置上,本质上讲就是”自定义属性”
  • v-text 相当于 textContent,内容必须是 JS 代码
  • v-html 相当于 innnerHTML,内容必须是 JS 代码
  • v-once 只渲染一次,类似常量
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>v-text,v-html,v-once</title>
  8. <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  10. <body>
  11. <!-- vue指令: v-为前缀的一组指令,写到html标签的属性位置上,本质上讲就是"自定义属性" -->
  12. <div class="app">
  13. <p>用户名: {{username}}</p>
  14. <!-- v-text 相当于 textContent,内容必须是JS代码 -->
  15. <p>用户名: <span v-text="username"></span></p>
  16. <!-- v-html 相当于 innnerHTML -->
  17. <p>用户名: <span v-html="username"></span></p>
  18. <!-- v-once: 只渲染一次 -->
  19. <p>用户名: <span v-once="username"></span></p>
  20. </div>
  21. <script>
  22. const app = Vue.createApp({
  23. data() {
  24. return {
  25. username: "10086",
  26. };
  27. },
  28. }).mount(".app");
  29. app.username = '<span style="color:red">500</span>';
  30. app.username = "1000";
  31. </script>
  32. </body>
  33. </html>

[http://help10086.cn/0113/demo3.html]

样式绑定

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>样式绑定</title>
  8. <script src="https://unpkg.com/vue@next"></script>
  9. <style>
  10. .active {
  11. color: red;
  12. }
  13. .bgc {
  14. background-color: lightgreen;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div class="app">
  20. <!-- 一: 样式绑定 v-bind, 简化: 冒号 -->
  21. <!-- 行内样式 style -->
  22. <p style="color: #ff0000">help10086.cn</p>
  23. <p v-bind:style="style">help10086.cn</p>
  24. <p style="color: #0000ff; background-color: #ffff00">help10086.cn</p>
  25. <p :style="{color: textColor, backgroundColor: bgColor}">help10086.cn</p>
  26. <!-- <button style="前面三个是基本样式,后面三个是定制样式"></button> -->
  27. <button :style="[btnBase, btnCustom]">提交</button>
  28. <!-- class样式 -->
  29. <p :class="active">hello word!</p>
  30. <p :class="{'active':isActive}">hello texhong!</p>
  31. <p :class="['active', 'bgc']">hello jinyu!</p>
  32. <p :class="[active , bgc]">hello viet nam!</p>
  33. </div>
  34. <script>
  35. const app = Vue.createApp({
  36. data() {
  37. return {
  38. style: "color:#0000ff",
  39. textColor: "#008000",
  40. bgColor: "#00ffff",
  41. btnBase: {
  42. width: "5em",
  43. height: "2em",
  44. border: "none",
  45. },
  46. btnCustom: {
  47. backgroundColor: "seagreen",
  48. color: "#ffffff",
  49. cursor: "pointer",
  50. },
  51. active: "active",
  52. isActive: false,
  53. bgc: "bgc",
  54. };
  55. },
  56. }).mount(".app");
  57. </script>
  58. </body>
  59. </html>

[http://help10086.cn/0113/demo4.html]

双向绑定

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>双向绑定</title>
  8. <script src="https://unpkg.com/vue@next"></script>
  9. </head>
  10. <body>
  11. <!-- es6 -->
  12. <p>
  13. <div>es6:</div>
  14. <input type="text" oninput="this.nextElementSibling.textContent=this.value"><span></span>
  15. </p>
  16. <!-- vue -->
  17. <div class="app">
  18. <p>
  19. <div>vue@input</div>
  20. <!-- vue中的事件对象,使用 $event , 不能直接用 event -->
  21. <input type="text" v-on:input="comment = $event.target.value" :value="comment"><span>{{comment}}</span>
  22. </p>
  23. <p>
  24. <div>vue@v-model</div>
  25. <!-- vue中的事件对象,使用 $event , 不能直接用 event -->
  26. <input type="text" v-model="comment" :value="comment"><span>{{comment}}</span>
  27. </p>
  28. <!-- 延迟绑定 -->
  29. <p>
  30. <div>vue@v-model.lazy</div>
  31. <input type="text" v-model.lazy="comment" :value="comment"><span>{{comment}}</span>
  32. </p>
  33. </div>
  34. <script>
  35. const app = Vue.createApp({
  36. data() {
  37. return {
  38. comment: ''
  39. }
  40. }
  41. }).mount('.app')
  42. </script>
  43. </body>
  44. </html>

[http://help10086.cn/0113/demo5.html]

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:v-once用的比较少,<span v-once>{{username}}</span>
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