2019-7-4 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
<h1>{{info()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_data',
data: {
title: "Vue.js",
url: "https://cn.vuejs.org"
},
methods: {
info: function() {
return this.title + " - 坚持学习！";
}
}
})
</script>
</body>
</html>
1、每个Vue应用都需要实例化Vue来实现
var vm = new Vue({
//*******
})
2、el参数
在上面实例中的id为vue_data，在div元素中：
<div id="vue_data"></div>
意味着所有的改动均在这个id为vau_data的div中，外部不受影响。
3、定义数据对象
data用于定义属性，在上述实例中有2个属性，分别为：title、url。
methods用于定义函数，可以通过return来返回函数值。
{{ }}用于输出对象属性和函数返回值。
当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="../static/vue.min.js"></script>
</head>
<body>
<div id="vue_data">
<h1>title : {{title}}</h1>
<h1>url : {{url}}</h1>
</div>
<script type="text/javascript">
//数据对象
var data = {title: "Vue.js",url: "https://cn.vuejs.org"}
var vm = new Vue({
el: '#vue_data',
data: data
})
//设置属性会影响到原始数据
vm.title = "spring";
document.write(data.title + "<br>");
//同样
data.url = "https://spring.io";
document.write(vm.url);
</script>
</body>
</html>
Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。
document.write(vm.$data === data) // true
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。