• VusJs之入门


    1.导入Vue环境,菜鸟联盟上有好几种方法,我自己选择了最省事的一个QAQ,毕竟能偷懒就偷懒嘛(http://www.runoob.com/vue2/vue-install.html页面下载Vue.min.Js);

    2.我用的工具是HBulider,轻量级开发工具;

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>VueJs入门项目</title>
        </head>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <body>
        <div id="app">
          <h1>{{download()}}</h1>
          <h1>site:{{site}}</h1>
          <h1>{{details()}}</h1>
          <div v-html="message"></div>
        </div>
    
        <script>
        new Vue({
          el: '#app',
            data: {
            message: "<h2>菜鸟教程</h2>",
            site: "www.baidu.com",
            alexa: "10000"
          },
          methods: {
                    details: function() {
                        return  this.site + " - 学的不仅是技术,更是梦想!";
                    },
                }
        })
    </script>
    </html>

    A:每个 Vue 应用都需要通过实例化 Vue 来实现。   (New Vue{});

    B:Vue 构造器中有一个el 参数,它是 DOM 元素中的 id;

    C:methods 用于定义的函数,可以通过 return 来返回函数值;

    D:{{ }} 用于输出对象属性和函数返回值;

    F:除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来

    G: v-html 指令用于输出 html 代码;

    H: 用法是后面加冒号,跟上html元素的属性

    I:v-model 指令在input元素上实现双向数据绑定,负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理;

    J: VueJs 提供了完全的 JavaScript 表达式支持;

    K:VueJs指令 指令是带有 v- 前缀的特殊属性  如v-if 判断为true/false  参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性   v-on 指令,它用于监听 DOM 事件等;

    L: 过滤器/修饰符

    M:缩写 v-bind 可以省略   v-on = @

    往事如烟,余生有我.
  • 相关阅读:
    image
    MySQLdb
    【基础】Equal方法、面向对象-多态-继承-封装
    【转】SSL协议、SET协议、HTTPS简介
    【转】UML图与软件开发过程那点关系
    【转载】日本社会为啥没有“王思聪”
    调用0A中断输入字符串数据段的DUP定义
    字符串输入逆序输出(回车换行符)
    输入单个字符并输出
    仿射密码加密解密文件流
  • 原文地址:https://www.cnblogs.com/assistants/p/10302308.html
Copyright © 2020-2023  润新知