追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


Vue.js 学习日志(一)

2019-7-4 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


<!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 学习日志(一) « 如何成为一个让人幸福的设计师? | 数据可视化大屏设计经验分享»


订阅Rss