今天在自隔离的房间里好无聊,决定开始学习并且立即使用这个前端框架来做个页面,https://www.dx.com/ , 为什么选择这个页面呢,因为这个是我的老东家,并且感觉这个页还还挺复杂的,有一定的挑战性。
一、vue,关于这个前端框架,需要以下的简单说明一下,以下的内容如果有错误,请网友们指正。
1、干嘛用的:vue 提供了自动的数据结构与dom自绑定功能,说明白一些,就是相对于传统的jQuery开发,vue免掉了对dom节点的操作,直接对数据结构进行处理即可立即反映到dom节点,并且渲染出来。一句话,jQuery 对页面的处理不仅仅需要处理内存中的数据,还需要进行append或者remove 等操作处理dom元素,而vue只需要处理内存中的数据。所以vue开发可以花更多的时间精力处理数据结构。
2、vue 提供了什么,vue是js框架,但是也可以当做一门独立的语言来看待,作为一种开发语言,它给我们提供了什么呢?
1、一门独立语言需要什么?肯定是语法呀,独一无二的让别人认识的东东,vue 当然得使用v- 来显摆啦。
1)逻辑判断:if...else if...else ,vue 当然得写成 v-if.....v-else if....v-else ;
2)循环:for while ,vue 当然得写成 v-for ;
2、vue是处理html的dom的语言,它得给我们提供什么呢?
1)模板 template,当然得提供这个,难道让我们什么都写死好了在dom吗,有些节点有时候有,有时候没有,写在template再加上js 处理,多快活自在。
2)事件,dom元素需要事件的,人家需要表现性的。vue得给,v-on ,就如jQuery的$.on() 并且还可以更加简单写呢,例如:v-on:click="clickFunction" 可以写成 @click="clickFunction",牛吧,又省掉几个字。当然事件有各种牛逼的功能,例如有事无事与爸爸妈妈说一下,那就是冒泡罗。如果有一天我无意找到了好几个女朋友了,不想告诉他们怎么办呢,那就乖乖保密吧,哈哈。使用
<!-- 阻止单击事件继续传播 -->
<av-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<formv-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 --><av-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 --><formv-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --><divv-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 --><divv-on:click.self="doThat">...</div>
3)属性,dom元素都爱美的,需要花枝招展。vue得给,v-bind ,如同jQuery的$.attr(),例如:
v-bind:class,还可以写成 :class 呢,哇,少写几个字,拿时间来画眉,泡仔去。
4)dom元素与数据爱的浓浓,你变我也变,你好我也好,咋办?v-model,双向绑定还不行吗?
3、很多事情都是会有连锁的,例如,女朋友发工资了,会给我10%的当零花钱,心情好呢会快一些给,心情不好会慢一些给,怎么办?那就使用 computed 罗。我很帅,女朋友一发工资就得给我钱,一秒都不能延迟,那就watch ,监控着。
var vm = new Vue({
el: '#example',
data: { message: 'Hello' },
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
returnthis.message.split('').reverse().join('')
} },
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = '如果发工资立马给钱'
this.debouncedGetAnswer()
} }
})
4、一个页面好复杂,有很多功能模块,有的模块有很多页面需要使用,人懒,怎么办?哇,
component 来啦,component 可以提供大家独立开发,再组装,大家都可以干自己的事啦。
5、组件的数据需要过滤,前面怎么传到条件来组件逻辑中呢,那就是组件通话(通讯)啦。组件中的props 可以获取到传来的值。
第一次笔记差不多啦,都是一些概念,明天开始搭项目,写页面,先写好http://dx.com的静态页面,写好css,这个也是一个很重的工作呢,哇,加油啦,火烈高,病毒不入侵,最后强调一下此次学习的任务。
![20f600c738d8430ba10b4f979e62778d.png](https://i-blog.csdnimg.cn/blog_migrate/8136ee7c6291166e9a0a812d426aeb6e.jpeg)
![d42f929930b613a5ee95af3ca78d8806.png](https://i-blog.csdnimg.cn/blog_migrate/04400b01cf5adbaaffac2c190322e6e9.jpeg)
![10ed2ee157e700ded55da781b1edfb01.png](https://i-blog.csdnimg.cn/blog_migrate/7235b839ee4f9d791c5af0debdcdc1f5.jpeg)