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