zoukankan      html  css  js  c++  java
  • Vue 学习笔记1 Hello_Vue

    基础:html,javascript

    知识点:

    • 插值表达式: {{ 变量名 }}
    • Vue应用实例化: new Vue({ 选项 })
    • el:"选择器",建议使用ID选择器 "#id"。
    • Vue会管理 el 选项命中的元素及其后代元素。
    • Vue不能挂载到html,body等特殊标签,一般挂载在div标签下。

    第一步:导入Vue

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    

    第二部:在html中写Vue标签

    <div id="app">
      <p>{{ message }}</p>
    </div>
    

    第三部:在html中写对应脚本,对Vue标签进行操作

    let tmp =new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue'
      }
    })
    

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lesson 1 Hello Vue</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p>{{ message }}</p>
        </div>
        <script>
            let tmp = new Vue({
                el: "#app",
                data: {
                    "message": "Hello Vue"
                }
            })
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    8626 原子量计数
    17229 Lry,你除了2还是2
    11153 kill boss
    1143 多少个Fibonacci数
    8614 素数__
    We Chall-Training: Stegano I-Writeup
    We Chall-Training: Get Sourced-Writeup
    We Chall-Prime Factory-Writeup
    CTF入门指南
    pwnable.kr-collision -Writeup
  • 原文地址:https://www.cnblogs.com/congxinglong/p/13523062.html
Copyright © 2011-2022 走看看