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>
#最常见的数据绑定就是使用{{}}的文本插值

  

 

猜你喜欢

转载自www.cnblogs.com/jabbok/p/10616834.html