vue教程1-初体验
Posted jabbok
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue教程1-初体验相关的知识，希望对你有一定的参考价值。
起步
var vm = new Vue({
// 选项
})
#每个Vue应用都需要通过实例化Vue来实现，语法格式继承原生js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"> <h1>site: {{ site }}</h1> <h1>url: {{ url }}</h1> <h1>{{ details() }}</h1> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { site: "jabbok blog", url: "www.jabbok.com", }, methods: { details:function () { return this.site + "- for ops & dev!"; } } }) </script> </body> </html> #el：就是DOM元素中的id，在这个例子中，vue的全部改动都会在这个id为app的div中产生影响。 #data:定义属性，将DOM中{{}}中的元素进行渲染替换 #methods：定义函数，这里是details()，可以通过return返回函数值，这里返回一个拼接字符串
模板语法
<div id="app">
<p>{{ message }}</p>
</div>
#最常见的数据绑定就是使用{{}}的文本插值
以上是关于vue教程1-初体验的主要内容，如果未能解决你的问题，请参考以下文章