• VUE 笔记 基础语法篇

    VUE hello world 程序

    1. html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>hello worldtitle>
    6.     <script src="https://unpkg.com/vue@next">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="root">div>
    11. body>
    12. <script>
    13.     const app = Vue.createApp({ 
    14.         template:`<div>hello worlddiv>`
    15.     })
    16.     app.mount("#root") 
    17. script>
    18. html>

    1 插值表达式

    在 “{{}}”中可以写入一行表达式，可以直接获取data的数据。

    1. html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>hello worldtitle>
    6.     <script src="https://unpkg.com/vue@next">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="root">div>
    11. body>
    12. <script>
    13.     const app = Vue.createApp({
    14.         data(){
    15.             return{
    16.                 message:'hello world'
    17.             }
    18.         },
    19.         template:`
      {{message}}
      `
    20.     })
    21.     app.mount("#root")
    22. script>
    23. html>

     

    1.2 使用 v-html 进行html元素插值 

    1. <script>
    2.     const app = Vue.createApp({
    3.         data(){
    4.             return{
    5.                 message:'hello world'
    6.             }
    7.         },
    8.         template:`
      {{message}}
      `
    9.     })
    10.     app.mount("#root")
    11. script>

    如果单纯插值表达式，会将 html 标签原样输出

     此刻使用 v-html 可以解决这个问题，v-html 指令是设置 innerHTML

    1. <script>
    2.     const app = Vue.createApp({
    3.         data(){
    4.             return{
    5.                 message:'hello world'
    6.             }
    7.         },
    8.         template:`
      `
    9.     })
    10.     app.mount("#root")
    11. script>

    1.3 对 html 元素名字进行插值

    使用 [attributeName] 即可插值属性名

    1. html>
    2. <head>
    3.     <meta charset="UTF-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.     <title>hello worldtitle>
    6.     <script src="https://unpkg.com/vue@next">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="root">div>
    11. body>
    12. <script>
    13.     const app = Vue.createApp({
    14.  
    15.         data(){
    16.             return{
    17.                 name:'title',
    18.                 message:'dell'
    19.             }
    20.         },
    21.         template:`
    22.         <div v-bind:[name]="message">div> 
    23.         `
    24.     })
    25.     app.mount("#root")
    26. script>
    27. html>

     

    2 数据绑定

    Vue中有2种数据绑定的方式：

    单向绑定（v-bind）：数据只能从data流向页面
    双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
    备注：

    双向绑定一般都应用在表单类元素上（如：、