Vue从入门到放弃笔记(1)——Vue版HelloWorld

      最近开始入坑学vue了,学React的“失败”还历历在目(基础没打好的情况下直接写项目果然难顶)。ps:这个笔记主要用作个人记录与交流学习,主要参考geektime的vue开发实战专栏,前期代码居多,后期入门了就稍加完善这个笔记,没入门就烂尾?

      Vue是一门Processive(渐进性),Reactive(响应式)的前端框架...更多细节可以查看vue中文官网对vue的简介视频。

      作为各种编程语言(框架)的第一个入门程序,那必然是helloworld,创建一个helloworld.html文件,使用你喜欢的编辑器(推荐vscode)打开,将如下的Html代码编入(重点是标签,重重点是

    运行结果为:

 

这种是cdn方式引入vue.js,如果不联网可以选择下载一个离线的vue.js文件以便在本地引入。    

右击chrome浏览器空白处选检查(快捷键(fn+)F12),打开档期页面的console:

Vue从入门到放弃笔记(1)——Vue版HelloWorld_第1张图片

编码改变app.message的值并回车执行:

   Vue从入门到放弃笔记(1)——Vue版HelloWorld_第2张图片

可以看出id为app的div中的文本是随new的Vue对象中的message值变化而立刻变化的,这个体现了Vue响应式的特点。第一个script标签src引用的url来源于vue官方教程(官网->学习->教程->下拉到安装)

 

Vue从入门到放弃笔记(1)——Vue版HelloWorld_第3张图片

 

       再复杂一点的例子是自定义一个vue列表组件并展示列表,代码的细节暂时没能力说明白,大概使用了vue指令,逻辑还是挺清晰的:




    
    
    
    Hello, itemList!


    
{{message}}

运行结果:

Vue从入门到放弃笔记(1)——Vue版HelloWorld_第4张图片

  这两个例子非常简单,使用的vue的方式类似引进Jquery通过script标签src指定js文件位置的方式。这种是不推荐的,最主要的原因感觉还是前端工程化。现代的前端不再像以前那样写写多个html页面css样式js脚本构建了。后续会谈...

你可能感兴趣的:(vue入坑)