如何学习Vue?

论坛 期权论坛 知乎     
知乎用户   2019-8-14 01:10   1518   5
转载声明:本文由互联网用户自发贡献,部分转载来源来自知乎(zhihu.com),强烈建议您访问知乎查看完整内容。本社区不拥有所有权,也不承担任何法律责任。如有侵权,请联系optbbs@163.com。一经查实,即刻删除。
在全篇通读Vue的官方文档。对Vue有了初步认识之后。发觉还是没办法独立的完成一个独立的类似博客的项目。对其中的路由等的还是不是很理解。一部分api不了解。。。应该如何继续学习vue呢。万分感谢
分享到 :
0 人收藏

5 个回复

倒序浏览
热心回应  16级独孤 | 2019-8-14 01:10:11
购买黄轶老师的vue视频,花钱了,学的才会用心
热心回应  16级独孤 | 2019-8-14 01:10:12
我个人觉得其实vue的入门很简单,但是要精通确实要有实战的经验的积累,单凭官网的简单实例,以及网上的教材很难做到精通,现在就让我们一起从vue的入门学起吧!
首先下载vue.js 文件 ,然后引入,(这里为了方便学习和使用所以先下载下来,实质项目中并不需要,只需npm 或者yard ) 很简单一个script 标签
其次,在div 中绑定vue 上代码,         您好! {{message}}, {{arr}}以后日子多多指教
   var vm = new Vue({         el: '#app',         data: {             message: '我是VUE',             arr: [1,2,3,4]         }     })
一个简单的vue实例就创建完了,然后在浏览器上跑起来,结果是 : 您好! 我是VUE, [ 1, 2, 3, 4 ]以后日子多多指教  是不是很简单就学会了.
好,接下来我学习一下vue的生命周期, vue 的生命周期也叫钩子函数,是vue从创建到销毁所触发的函数,
1.beforeCreate(){console.log("创建之前");},  beforeCreate(),这是第一个生命周期函数, 表示实例完全被创建出来之前, 会执行它,此时data和methods中的数据和方法都还没有被初始化,在这里是获取不到data中的数据的,console会报错,undefined
2.created(){console.log("创建完成");},  created()这是第二个命周期函数  在created 中, data和methods,都已经被初始好了,所以 如果要调用 methods 中的方法, 或者操作data中的数据, 最早只能在created 中操作
3.beforeMount(){console.log("挂载之前");}, 这是第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把数据模板渲染到页 如果这个时候想获取页面中的元素只能获取到未编译的值console.log(document.getElementById("h3").innerText);
console.log(this.$refs.myh3);    //undefind  还没有获取到dom元素,在 beforeMount执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串
4.mounted(){console.log("挂载完成");},这是第四个生命周期函数,表示 内存中的模板,已经真实的挂载到了页面中, 用户已经可以看到渲染好的页面了
console.log(document.getElementById("h3").innerText);
console.log(this.$refs.hh3.innerText);   //ok    这句话表明 要操作dom 元素至少在挂载完成后
注意 : mounted 是实例创建期间的最后一个生命周期, 当执行完mounted 就表示,实例已经被完全创建好了, 此时, 如果没有其他操作的话, 这个实例, 就静静的躺在我们的内存中, 一动不动
5.接下来是运行中的两个事件
beforeUpdate(){  //这个时候表示 , 页面还没有被更新,数据更新了
console.log("页面上元素的内容:" + document.getElementById("h3").innerText);
console.log("data中的msg数据是:" + this.msg);
结论: 当执行了beforeUpdate 的时候,页面中显示的数据还是旧的,此时data中的数据是最新的, 页面尚未和最新的数据保持同步
6.updated(){console.log("更新完成"+this.message);},  console.log("页面上元素的内容:" + document.getElementById("h3").innerText);
console.log("data中的msg数据是:" + this.msg);
updated 事件执行的时候, 页面和data 中的数据已经保持同步了, 都是最新的
7.beforeDestroy(){console.log("销毁之前");},
8.destroyed(){console.log("销毁了");}
这就是vue的八个钩子函数(也叫生命周期),vue 的生命周期很重要,学好了vue的生命周期学懂了一半vue,这里已经讲得比较清楚,如果还有疑问,欢迎一起来探讨.
学完了vue 的生命周期,接下来我们学习一下,vue的模板语法,也是很简单,直接上代码,
   
        
             {{message}}     {{1+2}}     {{1+1>1?'YES':'No'}}
            我是v-if
             修改1
             修改2
            
            
           
            
      
   


new Vue({
el: '#app',
data: {
     message: 'Hello Vue',
     imageURL: 'http://fb.topitme.com/b/2d/0f/112647038896a0f2dbo.jpg',
     myId: '007',
     myClass: 'app',
     myHTML: `我是html格式的数据,你要按html的方式给我渲染出来 `
   } ,
    methods:{
     myFun(){
     this.message = 5555;
}
    }
})

插值表达式 {{message}}    可以直接访问data里的属性 ,比如message 插值表达式还可以做简单的运算以及逻辑判断,如三木运算符,
v-if 是指令 跟 v-show (后面会讲到)一样都是指令,他是动态的隐藏与显示元素, 但两者又有不一样的区别, v-if 是是将dom元素整个添加或删除, 而v-show是简单的控制元素的display的属性dom元素还在。比较官方的说法是,
1.手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;
2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。
这里需要注意的一点是, v-if 和v-for(后面会讲到)一起使用时,v-for 具有比 v-if 更高的优先级。
v-on:click 也是vue提供的指令, 会触发methods 中的方法 , ,如上面的代码, 点击修改1 的时候会触发myFun 改变message 从而改变视图, 是不是很方便, 并不用我们去操作整个Dom 对象,只需关注业务逻辑, 这就是vue 的精髓之一.它3还挺功了简写的方式 @click
v-html 指令会将HTML 代码渲染出来,而不是直接读出来
v-bind: 指令是用来绑定元素的属性的, 绑定之后就可以动态的添加属性的值了,  它也提供了简写的方式  '  : '   冒号.  属性绑定之后也可以做简单js 运算, 比如 :value = '1+1'
class 属性, vue为此做了专门的处理, 我们下次在继续探讨学习,现在先暂时学习到这里.
----------------------------------------------------------------------------------------------
二更:
上回学习到指令v-bind 接下来我们继续学习下去,
计算属性,顾名思义就是一种属性, 计算说明是动词,只有发生变化的时候才会改变的属性值,
比如  computed: {
         reverseMessage(){
                return this.message.split('').reverse().join('');
  } 我们可以直接在插值表达式中使用它, {{reverseMessage}},而不用做任何的处理,这里他定义的是一个function 的形式,所有的不需要改变的值都可以事先存到计算属性当中,知道发生改变,计算属性会自动更新到视图中.
属性监听: 是监听data中的属性,一旦发生改变,立即更新视图, 具体的用法可以这样用
data: {
            message: 'Hello Vuew',
        },
watch: {
        message(newValue){
            console.log("message的新值是"+newValue);
            }
    }
双向数据绑定其实就是绑定v-modul 指令,就可以实现数据的双驱动效果,数据改变立马更新到视图中,上代码:

        {{message}}
data:{
       message:'双向数据绑定就是这么简单'
}
ok,现在我来讲一下class ,一更的时候有说到要讲的, 咱作为最笨的人,学习不能落下任何一个知识点,
class 你可以绑定一个对象,比如
我是绑定class 的div
然后在style 中定义好active 的属性值,
.active {
width: 100px;
height: 100px;
background: orange;
}
然后就可以通过改变isActive 的值来动态的改变div 的class
改变div的class
data:{
isActive:false
}
第二种情况: 绑定数组
我是绑定数组的div
data: {
            isActive: true,
            msg: 'msg'
        },
        computed: {
           classObject(){
             return {
                    active: this.isActive,
                }
            }
        }
第三种情况: 可以绑定计算属性
我是绑定计算属性的div
computed: {
    classObject(){
      return {
           active: this.isActive,
            }
     }
   }
同样的,我们也可以绑定style 属性进行css 样式




普通信息
警告信息

new Vue({
        el: '#app',
        data: {
            styleObject: {
                width: '100px',
                height: '100px',
                backgroundColor: 'cyan',
                marginBottom: '10px'
            },
            msgStyle: {
                color: 'lightgray'
            },
            dangerStyle: {
                color: 'red'
            }
        }
    })
这样是不是很简单明了,这就是vue作者考虑到css 样式做的特殊的处理.


热心回应  16级独孤 | 2019-8-14 01:10:13
先了解你有一个什么样的项目,或是是自己创造了一个什么样的项目
你这个项目需要采用什么样的技术
有哪些技术跟VUE这类技术有关
这些技术会用到VUE什么程度的技术
不过
就你现在的情况来看,你需要的并不是VUE的技术,而是一个标准网站的技术。
热心回应  16级独孤 | 2019-8-14 01:10:14
“对Vue有了初步认识之后。发觉还是没办法独立的完成一个独立的类似博客的项目。”猜你应该写前端的时间不会太长,写过的项目也没有几个才会这样。首先你要打好基础才去接触这些框架,多用原生的写几个项目,有了深刻理解之后再去看这些框架,你就会发现vue不过只是提供了一些语法糖而已,更像是配置项目。所以感觉你可能有点急于求成了,技术是慢慢积累。等熟练的运用了vue,就可以开始手撕vue源码,这样你就知道你不理解的api在干啥了。
热心回应  16级独孤 | 2019-8-14 01:10:15
JS学会了吗?学会了,看文档,然后找个项目,练练手,多少代码。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:182358
帖子:1746
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP