码迷,mamicode.com
首页 > 其他好文 > 详细

vue教程1-初体验

时间:2019-03-29 10:27:16      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:title   site   定义函数   cfile   返回   his   ati   html   教程   

起步

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-初体验

标签:title   site   定义函数   cfile   返回   his   ati   html   教程   

原文地址:https://www.cnblogs.com/jabbok/p/10616834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!