20201012岳浩天
学习知识
Vue
Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架
第三方：别人写好的，我们直接下载即可
渐进式：可以逐步在项目中引入Vue的各项功能，同时，可以与其他技术混用
MVVM设计模式：
界面(View)：视图，指网页中的元素和样式，一般指的就是html和css。view是.html网页中的一个需要动态加载内容的父元素，比如:"div#app"。html中的视图，也被称为模板template，如果发生template错误，那么就在html中查找就可以了
数据模型(Model):集中保存界面中所需要的所有变量和变量值。模型，指程序中创建的或者从远程获取的数据，一般使用js中的一个对象data来保存，内容就会直接显示到view中
控制器(ViewModel):视图模型/控制，用于替代之前DOM/jQuery操作，封装了重复的增删改查操作，把模型中的数据和视图中的html元素“绑定”到一起。Vue类型提供的就是一种强大的ViewModel对象，可以自动同步数据和页面元素。专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步
ViewModel核心原理：（响应系统/虚拟DOM树）
纯前端：不需要任何后端技术，就能够独立运行
框架：包含核心功能的半成品代码，开发人员只需要根据业务的需求，添加定制自己个性化的一部分内容即可
（构造+原型）
什么时候使用Vue？为什么使用Vue？
1.Vue适用于以数据操作为主的项目(web/app)，2.我们使用vue框架可以提高项目的开发效率
v-bind 绑定class/style
<body>
<div id="app">
<img :src="imgUrl" alt="">
<h3 :class="titleColor">标题</h3>
<!-- 动态绑定 -->
<!-- <h3 :class="{
titleColor:istitleColor,fontS:isfontS
}">标题</h3> -->
<h3 :class="getClasses()">标题</h3>
<!-- 动态绑定style -->
<h3 :style="{color:color,fontSize:fontSize+'px'}">标题</h3>
<h3 :style="getStyles()">标题</h3>
</div>
<script src="./js/vue.js"></script>
<script>
var data = {
imgUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340',
titleColor: "titleColor",
color: 'red',
fontSize: 100,
istitleColor: true,
isfontS: true
}
var vm = new Vue({
el: "#app",
data: data,
methods: {
getClasses: function () {
return {
titleColor: this.istitleColor,
fontS: this.isfontS
}
},
getStyles: function () {
return {
color: this.color,
fontSize: this.fontSize + 'px'
}
}
},
})
</script>
</body>
计算属性的简单应用
<body>
<div id="app">
<p>{{firstName+' '+lastName}}</p>
<p>{{firstName}} {{lastName}}</p>
<p>{{getFullName()}}</p>
<p>{{fullName}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
var data = {
firstName: 'Lebron',
lastName: 'James'
}
var vm = new Vue({
el: "#app",
data: data,
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
},
})
</script>
</body>
心得
今天进入了vue的学习，很重要，所以老师讲的比较慢，知识点一个一个弄懂了
还有就是说，近期可能会有企业来宣讲招人，心里有些没底，自我认知还没有达到上岗要求，近期要抓紧时间，临阵磨枪那也得磨！
点赞
评论留言