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 = @

 

posted @ 2019-01-22 10:18  闻长歌而知雅意  阅读(1323)  评论(0)    收藏  举报