Vue 实例，创建一个 Vue 实例，数据与方法（data对象数据属性）
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue.js 是什么？
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
Vue 实例，创建一个 Vue 实例，数据与方法（data对象数据属性）
以下代码是保存至一个index.html的文档（文件后缀名是.html）中，并非是.vue的文件，当今后学会了一些更vue复杂的应用的时候，比如CLI创建了更复杂的vue应用，并支持单文件组件，那在项目下创建的文件可能就是以.vue为后缀的文件。
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 实例，创建一个 Vue 实例，数据与方法（data对象数据属性）</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }}{{ sitename }}
</div>
<script type="text/javascript">
var data = {message: 'Hello Vue!', sitename: '编程之吧'}
var vm = new Vue({
el: '#app',
data: data
});
/*当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。
*当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
*/
// 获得这个实例上的 property（属性）
// 返回源数据中对应的字段
vm.message == data.message // => true
// 设置 property（属性） 也会影响到原始数据
vm.message = 'Welcome https://www.fxzbcn.com'
data.message // => 2
// 反之亦然
data.sitename = '欢迎来到编程之吧！'
vm.sitename // => '欢迎来到编程之吧！'
/*
当这些数据改变时，视图会进行重渲染。
值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
也就是说如果你添加一个新的 property，比如：
*/
vm.sitedomain = 'www.fxzbcn.com'
/*
那么对 sitedomain 的改动将不会触发任何视图的更新。
如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。
比如：
*/
/*
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
*/
</script>
<!--
这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
-->
<div id="app_freeze">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
<script type="text/javascript">
var obj = {
foo: 'bar'
}
Object.freeze(obj)
var app_freeze = new Vue({
el: '#app_freeze',
data: obj
});
</script>
<div id="app_property">
{{ sitename }}
</div>
<script type="text/javascript">
var obj_property = { sitename: '编程之吧' }
var app_property = new Vue({
el: '#app_property',
data: obj_property
})
app_property.$data === obj_property // => true
app_property.$el === document.getElementById('app_property') // => true
// $watch 是一个实例方法
app_property.$watch('sitename', function (newValue, oldValue) {
// 这个回调将在 `app_property.sitename` 改变后调用
console.log(newValue);//在控制台查看是否输出
console.log(oldValue);//在控制台查看是否输出
});
app_property.sitename = '福星之吧'//此处修改sitename
</script>
</body>
</html>转载注明：
感谢博主，喝杯咖啡~
扩展查找
相关文章
0 条评论
发表评论
请喝咖啡
感谢博主，喝杯咖啡~
搜索文章
还没有人发表评论