河南如何优化网站,网络营销名词解释是什么,全球设计网站,居众装饰集团有限公司一、组件
1、让网页或局部页实现复用#xff0c;包括js#xff08;vue#xff09;功能
组件#xff08;Component#xff09;是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素#xff0c;封装可重用的代码。在较高层面上#xff0c;组件是自定义元素#xff0c; …一、组件
1、让网页或局部页实现复用包括jsvue功能
组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素封装可重用的代码。在较高层面上组件是自定义元素 Vue.js 的编译器为它添加特殊功能。在有些情况下组件也可以是原生 HTML 元素的形式以 is 特性扩展
2、基本语法创建js文件
//页面模板
var temp template idtestdiv页面内容/div/template
//创建一个组件
Vue.component(test,{template: temp, //el:#appdata: function(){return { //model}
},
methods:{},//自定义属性,获取属性值---数组
props:[属性名1,属性名2]
})3、例如登录功能
数据传递问题
1当登陆成功从当前页把数据传递给组件----用属性父组件通过属性向子组件传参
2组件执行完结果之后再把数据回传回来子组件通过按钮把数据回传给父组件
使用组件
1在父组件中引入子组件导入js文件并使用test标签
index.html04vue
div idapph2组件/h2test/test
/div
script srcjs/vue.min.js typetext/javascript charsetutf-8/script
script srcjs/test.js typetext/javascript charsetutf-8/script
2用自定义属性从父组件传递给子组件
父组件
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv idapph2组件/h2//利用子组件自定义属性传参test msg输入姓名/test/divscript typetext/javascript srcjs/vue.min.js charsetUTF-8/script//引入子组件.jsscript typetext/javascript srcjs/test1.js charsetUTF-8/scriptscript typetext/javascriptvar vm new Vue({el:#app,data:{}})/script/body
/html子组件
//创建页面模板
var temp template idtestdiv{{msg}}input v-modelname /button typebutton clicktestres()测试/button/div/template
//创建组件
Vue.component(test,{template:temp,data:function(){return{//属性写namename: }},methods:{},//自定义属性props:[msg]
})
3从子组件回传数据给父组件
基于事件监听---自定义事件(自定义命名)
父组件自定义事件及方法
父组件
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodydiv idapph2组件/h2!-- 父组件自定义事件 myevent相当于一个接收器 --test msg输入姓名 myeventacceptres/testhr !-- 子组件传过来的数据显示的位置 --span{{info}}/span/divscript typetext/javascript srcjs/vue.min.js charsetUTF-8/scriptscript typetext/javascript srcjs/test1.js charsetUTF-8/scriptscript typetext/javascriptvar vm new Vue({el:#app,data:{info:},methods:{//接收器acceptres(res){this.infores}}})/script/body
/html子组件
//创建页面模板
var temp template idtestdiv{{msg}}input v-modelname / button typebutton clicktestres()测试/button/div/template
//创建组件
Vue.component(test,{template:temp,data:function(){return{//属性写namename: }},methods:{//给父组件回传消息 父组件自定义的事件名 回传信息testres(){this.$emit(myevent,this.name)}},//自定义属性props:[msg]
})
二、es6箭头函数
顶替了匿名函数方便使用this
function(){ //使用this是指向当前这个类就不能指向当前的vue了所以使用vm参数
//代码
}
箭头函数--表达式
(){}
若只有一个参数可以省略小括号
若只有一行代码可以省略大括号和return
三、路由
1、路由技术的实现
路由---组件和路径的结合---相当于自定义的超链接
1.1创建route---路由实现整个项目的导航---对应一个路径---组件
{path:路径, component: 组件完成页面的样式和功能}
1.2创建路由数组routes----配置很多的路由
[{路由1},{路由2},{路由3}]
1.3创建router---路由器
router-view----加载路由[组件]的容器
div idapp
a href#/login登录/aa href#/register注册/a
router-view/router-view
/div
router-link---方式
router-link to/login登录/router-link
router-link to/register注册/router-link
1.4 路由传参
2.1query方式
to/login?uid101upwd101
$route.query.xxx
2.2params方式
rest风格
{path:/register/:uid/:upwd, component: register}
to/login/101/admin
$route.params.xxx
创建路由的过程
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headbodydiv idapprouter-link to/reg?aid101注册/router-linkrouter-link to/log/a107登录/router-link!-- 连接会加载到这里 --router-view/router-view/divscript srcjs/vue.min.js typetext/javascript charsetutf-8/scriptscript srcjs/vue-router.js typetext/javascript charsetutf-8/scriptscript typetext/javascript//创建组件/*{{$route.query.aid}}取出请求路径 数据传参参数获取机制 */var reg {template:h2注册{{$route.query.aid}}h2/}var log {template:h2登录{{$route.params.uid}}h2/}//创建路由数组var routes [{path:/reg,component:reg}, //路由{path:/log/:uid,component:log}]//创建路由器var router new VueRouter({routes})//创建VUEvar vm new Vue({el: #app,router})/script/body
/html
