18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 2

    关注

  • 8

    粉丝

  • 127

    访客

  • 等级:新手上路
  • 总积分:0
  • 男,2011-01-01

最后登录:2019-08-27

更多资料

日志

Vue.js 学习日志(一)

2019-07-11 09:09
<!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界面设计 包装设计 图标定制 用户体验 、交互设计、 网站建设 平面设计服务

标签:    Vue.js    学习日志(一)


阅读全文

分类:默认分类|回复:0|浏览:81|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:10-19 07:04
©2005-2016 QTCN开发网 版权所有 Gzip disabled