首页天道酬勤vue从入门到精通教程,vue实战

vue从入门到精通教程,vue实战

张世龙 05-06 11:00 22次浏览

vue.js vue.js是一个用于构建用户界面的渐进式框架。

Vue的核心:声明性渲染,组件

Vue功能:模板引擎、组件、路由、状态管理器(管理数据可伸缩)、自动构建。

基本语法:第一步:部署vue.js :

//https://cdn.jsdelivr.net/NPM/vue/dist/vue.jsvuejs下载网站script src='js/vue.js'/script第二步:步骤

! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width,initi a 模板引擎声明式呈现组件:提高页面可复用性的路由:前端路由状态管理器:管理数据、自动构建可伸缩性:要求--divid=' app '/div 模板引擎: 1后端提供2 .动态组装数据3 .将组装内容由页面指定元素位置元素(el :装载点template:模板) (最终形成ui的原始结构) data :数据vue完成添加到装载点*/newvue((/属性三个核心点El:(#app ),template3360 ) H1 ) {title}/H1 ),data3360 ) title3360 )尴尬doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width, initial-scale=1.0 ' title document/titlescriptsrc=' js/vue.js '/script/headbodydivid=' app '/div/body/hhod 每个自己的模板都有一只企鹅,只有一个顶级根节点3。 如果指定了el,并且没有模板,则el的outerhtml将包含在template中,如果有,则包含其*/newvue(El:(#app )、template: /脚本页面效果:

vue-rende函数:

之后,详细情况更接近

body divid=' app '/div/body/html script/*参数:虚拟DOM; */newvue(El:'app (,render ) createelement (return createelement ) ) H1 ),attrs3360 ) h1:'Haha; ); /脚本装载

指定推迟装载实例化对象的谁调用

指定装载点

1. el挂载点不能是body和ht

ml
2.对象配置信息
2.当实例被挂载以后 vue实力上的内置属性都是以$或者——kaitoude

eg: app.$mount("#app");

data:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="aa"> </div></body></html><script> /* data 在当前模板中可以直接使用(不需要去使用this一类的东西); 2.data中的数据命名 不要使用$或——开头,因为vue解析data后他会把当前的数据加载到实例对象中; */ // 延迟挂载 new Vue({ el:"#aa", template:` <div id="aa"> <span>{{name}}</span> </div> `, data:{ name:"上课了" } }); console.log(app);</script>

视图更新 代码演示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script></head><body> <div id="aa"> <span>{{name}}</span> </div>//eg2: <div id="app"> <h1>x:{{obj.x}}</h1> <h1>y:{{obj.y}}</h1> <p>{{arr}}</p> </div></body></html><script> // 响应数据的变化(数据驱动视图)数据的变化会自动跟新视图(自动重新渲染模板) // 在console中其他写法:aa.$data.name ="你好" let aa = new Vue({ el:"#aa", data:{ name:"你过来" } }); console.log(aa);//eg2: // 只有监听了x才会顺便监听一下y; let app = new Vue({ el:"#app", data:{ obj:{ x:1 }, arr:[1,2,3] // 添加数组 app.arr.push(); // app.arr[2] = 666; } }); app.$set(app.obj,'y',200);</script>

数组中如何添加内容:

数据劫持(代码演示):

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="aa"> <h1>{{name}}</h1> </div></body></html><script> let app = document.querySelector("#aa"); function render(){ console.log("渲染开始~"); // x跟name的拼接 app.innerHTML = obj.x+"/"+obj.age; } // 自动渲染视图 let obj ={ x:1 } render(); // 手动重新渲染 render渲染开始 // obj.x = 100; // render(); // 数据劫持 变相的数据监听 有两个方法 一个设置 一个获取 let $data = {x:1}; Object.defineProperty(obj,"x",{ set(newVale){ // 每次x改变会变新的值然后用set调用形成死循环 $data.x = newVale; render(); }, get(){ return $data.x; } }); // 第二个值 Object.defineProperty(obj,"age",{ set(newVale){ $data.age = newVale; render(); }, get(){ return $data.age; } }) // 这里面的问题: // 无法对新增的属性进行监听(只能监听一个) 解决问题就是在写一遍 // 如下: // Object.defineProperty(obj,"age",{ // set(newVale){ // $data.age = newVale; // render(); // }, // get(){ // return $data.age; // } // });</script>
vue基础教程,vue vlog教程