Vue3 学习

基础

js:https://www.bilibili.com/video/BV15T411j7pJ/?spm_id_from=333.337.search-card.all.click&vd_source=9747207be61edfe4ec62226fc79b3589
官方文档: https://cn.vuejs.org/     版本之间差异在关于---》版本发布  https://cn.vuejs.org/about/releases.html   
vue3支持选项式和组合式 ,选项式基本等于vue2
vue文件:国内镜像: https://unpkg.zhimg.com/[email protected]/dist/vue.global.js

  工具 vscode :安装  Preview on Web Server     Live server   volar(禁用掉vue2 的vetur)

   Chrome安装插件 vue-devtools.crx
Vue引入的验证 
   1)  控制带输入Vue ,就会出现这个全局变量的信息
   2)也可以使用帮助文档API中验证,比如在控制台输入Vue.version
入门:{{}}




    
    
    
    
    Document


    {{10+20}}
    
{{ 10+20 }}

并且支持多个挂载,也就是还可以再写一行Vue.createApp().mount("#box2")

但是不能挂载 body节点,一般用div

引入变量

    在createApp()中增加

      

 

 data:function(){ }  zai ES6中简写为

 

在data()重定义变量及返回值

  

这样就有了app这个变量,可以在控制台输入app.myname查看和调试

原理

vue2原理: 

用js原生代码模拟,创建一个obj对象,js提供了defineProperty来感知变量操作

缺点是只针对单个对象的属性,要实现其他属性,只能嵌套循环,不能对数组等操作,故需要hack等技术包装




    
    
    
    Document




    
    

测试:

Vue3 学习_第1张图片

再加一个对dom元素操作




    
    
    
    Document


   

效果

Vue3 学习_第2张图片

vue3原理

    如果浏览器支持ES6,  使用ES6的proxy,否则使用vue2拦截原理

   上文只能拦截对象的制定属性,而下文则可以拦截对象本身,也就不用限定对象


    
hello

Vue3 学习_第3张图片

 

模版语法

你可能感兴趣的:(学习)