标签：赋值 浏览器 ati 中文 https new tor bsp 范围
Vue.js项目介绍
在使用Vue时，推荐在浏览器上安装Vue Devtools。它允许你在一个更友好的界面中审查和调试Vue应用
在开发环境下不要使用压缩版本，不然你会失去了所有常见错误相关的警告!
https://cn.vuejs.org/v2/guide/installation.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。
Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
$ npm install vue
当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量 Vue
Vue它是一个构造器函数
Vue( options )
this._init( options ) //在初始化执行vue
参数： options 我们称之为‘ 选项 ’
类型： Object
options / el
我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
body不能作为el的挂载目标
options / data 数据
new类型中 data选项是一个对象
使用形式： 在实例范围内，它相当于全局变量
我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
使用范围： el确定的那个范围
Vue是一个MVVM框架
M: data选项
V：el挂载的东西
VM： vm实例
// var vm = new Vue( options ) // 实例化Vue的到vm实例
var vm = new Vue({
el: ‘#app‘,// document.querySelector(‘#app‘)
data: {
msg: ‘hello Vue.js‘
}
}) // 实例化Vue的到vm实例
HTML
<body>
<div id="app">
<h3> VM改变 ——> V也跟着改变 </h3>
{{ msg }}
<h3> V改变 -> VM也跟着改变 </h3>
<input type="text" v-model="msg">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
var vm = new Vue({
el: ‘#app‘, // document.querySelector(‘#app‘)
data: {
msg: ‘hello Vue.js‘
}
}) // 实例化Vue的到vm实例
</script>
var box = document.querySelector(‘.box‘)
var button = document.querySelector(‘button‘)
var data = {
name: ‘Jick‘
}
// 观察者对象
var observer = {...data}
// es5提供的api方法,这个方法不兼容ie8以及以下
// Object.defineProperty(对象，对象的属性，对象属性的修饰符 )
Object.defineProperty( data,‘name‘,{
// get/set 统称为: ‘存储器‘
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name
标签：赋值 浏览器 ati 中文 https new tor bsp 范围
原文地址：https://www.cnblogs.com/zwj-lcx/p/11385270.html
