今天下午抽空看了会vue的视频，之前过了Js的基础与一些API的使用，急着给我的微服务项目部署前端页面，所以赶一下vue的基础，争取月末能通过vue的脚手架搭出好看的页面。
之前在学校也自学过vue简单的东西，组件化思想和我们的java后端的模块化有异曲同工之妙，减少耦合提高内聚，代码复用。
目前我们过基础就在html文件中编写vue的代码，后续赶高级写脚手架的时候就可以写vue文件了。
首先需要引入vue.js文件(我是下载了vue.js文件（开发环境而非生产环境vue.min,js）)：
<!-- 引入Vue -->
<script src="../JS库/vue.js"></script>其次实例化一个vue对象的格式是：
new Vue({
el: '',
data: {
}
})注意几个点：第一个键值对 key=el，value=挂载容器的css选择器名称，第二个键值对key=data，value=对象类型的数据（可以声明js对象定义中的属性与方法）
一个vue实例都可以映射一个dom容器（容器作为view层，vue实例作为viewmodel层，data作为model层），dom容器可以是块级元素div：
<div id="app" v-if="isshow">
<!-- 插值语法{{}} -->
{{massage}}
</div>容器（一块view的区域盒子）与vue实例映射的方式可以是id，class：
el:'#app'
el:'.app'
el:document.getElementById('app')
...
也可以不写el键值对，将vue实例存在变量里，再修改变量的$mount('value')挂载的容器id我们来看以下代码：
<!-- v-if="data中的变量" 决定Dom元素是否渲染 为false时这个div不渲染（就是压根在dom树中没有这么一个div结点）-->
<div id="app" v-if="isshow">
<!-- 插值获取{{}} -->
{{massage}}
</div>
<div id="cdd">
<span v-text="message">
</span>
</div>
<div id="cpp">
{{clazz}} {{name}}
</div>
<script>
// 阻止vue启动时产生生产提示信息
Vue.config.productionTip = false
// 创建Vue对象的方法 ：
// el根据css选择器指定挂载容器（可以为class类选择器也可以为id选择器） data存储对象数据供el指定的容器使用（注意作用范围）
new Vue({
// 比较傻乎乎的写法，根据Id获取dom对象来建立映射关系
// el: document.getElementById('app'),
el: '#app',
data: {
// 对象式声明data
massage: '我是第一个vue实例',
isshow: true
}
})
new Vue({
el: '#cdd',
data: {
message: '我是第二个vue实例'
},
//生命周期函数，根据单词意思就是在vue实例创建后执行的函数
// created: function () {
// alert('我是创建实例之后的钩子函数')
// }
})
new Vue({
el: '#cpp',
data() {
// 函数式声明data
return {
clazz: '193',
name: '黄林春'
}
}
})
</script>其中涉及到一些常用的vue命令，例如v-if与v-text命令，它们在vue的模板语法中都叫做命令语法，即解析标签的属性，绑定事件，标签内容等特性的命令规范。现在不列举命令语法中的命令，只作为比较插值语法来聊，至于插值语法，我们可以看到{{data中的属性名}}就能在标签体中获取到这部分的属性中进行渲染，当然不要在挂载该vue实例的容器中取别的vue实例的数据。
这里我们也能发现里面有两种data的声明方式—函数式声明与对象式声明：
new Vue({
el:'#app',
data(){
//函数式声明data
return{
name:'黄林春'
}
}
})
new Vue({
el: '#app',
data: {
// 对象式声明data
isshow: true
}
})看起来，函数式声明对我们java程序员比较耐看且友好。
其次我们来看看基础中的数据绑定：
<body>
<div id="app">
<!-- v-bind绑定数据是单向绑定，
v-model是双向绑定(在它应用表单类输入标签元素时)，
即双向可以从页面直接影响Vue实例里数据的值 -->
单向数据绑定<input type="text" v-bind:value="name"/><br/>
<!-- v-model:value="的简写形式就是v-model="" 默认-->
双向数据绑定<input type="text" v-model:value="name">
<hr/>
<h2 v-bind:x="name">你好！</h2>
<!-- 这里运行之后结果是不含有X的，而上面的代码则含有X说明v-model并不能绑定这个name的值给到X，感觉是由于没有输入也就没有对应的双向绑定一说，也许是作者的规范呢 -->
<!-- <h2 v-model:x="name">你好！</h2> -->
</div>
<script>
new Vue({
el:'#app',
data(){
return{
name:'黄林春'
}
}
})
</script>
</body>这里提到了两种绑定的命令：v-bind:value=“dat中的key” 以及 v-model:value="data中的key"，二者的区别也说的清除，前者属于从data中拿数据渲染到标签内容也就是页面，后者则是在前者功能的基础上还可以实现从页面上修改vue实例中的data键值。这也就是单向数据绑定与双向数据绑定。
前面我们提到el挂载的几种写法中有一种先将vue实例出来存储到变量里再修改其属性的方法（$mount挂载）:
// 这种挂载的方式则大相径庭，先将vue实例创建出来再通过V变量的属性$mount去管理容器
const v = new Vue({
data(){
return{
name:'huanglinchun'
}
}
})
// v.$mount('#app')
// 这样的挂载方式会灵活的改变页面数据的时间
// 写个定时函数去改变页面的值,加载页面之后过了1s才会显示name的值
setTimeout(() => {
v.$mount('#app')
},1000)
前面也提到过容器作为view层，data作为model层（其实含有的不止是data还有vue实例的属性与方法以及函数都可以进行访问），vue实例则作为viewmodel层实现MVVM模型的构建，我们不难看到这个模型，特别是在我们的后端开发中，其中我们的dao层就是作为传递数据的model层（不是数据来源的层），我们的前端页面就是典型的view层，我们的controller层就是控制层也相当于MVVM模型中的viewmodel层，这个我们的spring中是有一个对象modelandview对象，可以控制视图也可以传递数据，不就相当于这里的vue实例吗？
那么接下来就是我今天总结的最后一个（Object.definePropet()方法的使用）：
<body>
<script>
// 简单的JS数据代理方法使用
// 定义对象
let person = {
naem: '张三',
sex: '男'
}
// // 传递三个参数：你需要操作的对象，对象需要添加的属性，该属性的配置项：例如value
// Object.defineProperty(person, 'age', {
// value: 18,
// // 这里的enumerable默认为false即不可枚举的
// enumerable: true,
// // 这里writeable是默认为false即不可修改的
// writeable:true,
// // 这里的configurable默认是false即不可删除的
// configurable:true
// })
// // 经过这样的方法之后person = {naem,sex,age} 但是这样得来的age是
// 默认不能参与遍历的， 默认不能更改，默认不能删除
// // 需要在配置项里设置 enumerable: true 实现可遍历，writeable:true 实现可修改， configurable:true 实现可删除
// console.log(person)
// // Object.keys(对象名)可以将对象的属性名提取出来放到一个Array数组中
// console.log(Object.keys(person))
let number = 20
// 如果这里需要让number等于person的年龄属性并实现可以随着number的改变而改变age
Object.defineProperty(person, 'age', {
// 当读取age属性的时候将调用getter函数，返回值返回给age
get: function () {
console.log('正在读取geter方法')
return number
},
// 当改变age属性的时候将调用setter函数，且会获取到具体修改的值，
// 这里需要在函数内部异步修改number变量的值
set(value) {
console.log('修改age的值为' + value)
number = value
}
})
</script>
</body>Object.definePropet()方法的作用是什么呢？即在指定的对象内部添加新的属性，我们可以对属性的配置进行设置，例如初始值，可修改，可删除，可枚举等等。
这里的代码就是对person对象新增age属性的一些操作：
// 传递三个参数：你需要操作的对象，对象需要添加的属性，该属性的配置项：例如value
Object.defineProperty(person, 'age', {
value: 18,
// 这里的enumerable默认为false即不可枚举的
enumerable: true,
// 这里writeable是默认为false即不可修改的
writeable:true,
// 这里的configurable默认是false即不可删除的
configurable:true
})那么这些都是最简单的，因为我们如果想修改它的值给的配置比较多，这里我们可以通过setter与getter的方式对配置项进行修改：
let number = 20
// 如果这里需要让number等于person的年龄属性并实现可以随着number的改变而改变age
Object.defineProperty(person, 'age', {
// 当读取age属性的时候将调用getter函数，返回值返回给age
get: function () {
console.log('正在读取geter方法')
return number
},
// 当改变age属性的时候将调用setter函数，且会获取到具体修改的值，
// 这里需要在函数内部异步修改number变量的值
set(value) {
console.log('修改age的值为' + value)
number = value
}
})这里我们不难看出我们是在用Object对象的方法去修改person的属性，这种方式我们在java设计思想中叫做代理思想（AOP开发用cglib做代理，bean的实例化可以用动态或者静态工厂做代理，这都是代理思想的体现，实际上就是相当于结婚典礼交给婚庆公司一样，要的结果就是结婚，无非找第三方来做结婚这件事）。
3551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
