网站建设需要用到什么,建设电子商务网站目的,wordpress图片编辑插件下载,小区网站建设方案怎么写一、组件#xff08;重点#xff09;
组件#xff08;Component#xff09;是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素#xff0c;封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用#xff0c;几乎任意类型的应用的界面都可以抽象…一、组件重点
组件Component是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树 1、局部组件
创建 test_local.html
定义组件
var app new Vue({el: #app,// 定义局部组件这里可以定义多个局部组件components: {//组件的名字Navbar: {//组件的内容template: ulli首页/lili学员管理/li/ul}}
})使用组件
div idappNavbar/Navbar
/div2、全局组件
定义全局组件components/Navbar.js
// 定义全局组件
Vue.component(Navbar, {template: ulli首页/lili学员管理/lili讲师管理/li/ul
})创建 test_global.html
div idappNavbar/Navbar
/div
script srcvue.js/script
script srccomponents/Navbar.js/script
scriptvar app new Vue({el: #app})
/script二、实例生命周期 创建 lifeperiod.html
data: {message: 东西大街南北走
},
methods: {show() {console.log(执行show方法)},update(){this.message 出门遇见个人咬狗}button clickupdateupdate/button
h3 idh3{{ message }}/h3分析生命周期相关方法的执行时机
//创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法实例被创建出来之前执行console.log(this.message) //undefinedthis.show() //TypeError: this.show is not a function// beforeCreate执行时data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法console.log(this.message) //床前明月光this.show() //执行show方法// created执行时data 和 methods 都已经被初始化好了// 如果要调用 methods 中的方法或者操作 data 中的数据最早只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法console.log(document.getElementById(h3).innerText) //{{ message }}// beforeMount执行时模板已经在内存中编辑完成了尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法console.log(document.getElementById(h3).innerText) //东西大街南北走// 内存中的模板已经渲染到页面用户已经可以看见内容
},
//运行中的两个事件
beforeUpdate() { // 数据更新的前一刻console.log(界面显示的内容 document.getElementById(h3).innerText)console.log(data 中的 message 数据是 this.message)// beforeUpdate执行时内存中的数据已更新但是页面尚未被渲染
},
updated() {console.log(界面显示的内容 document.getElementById(h3).innerText)console.log(data 中的 message 数据是 this.message)// updated执行时内存中的数据已更新并且页面已经被渲染
}三、路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用single page web applicationSPA。
Vue.js 路由需要载入 vue-router 库
创建 test_router.html
1、引入js
!-- 顺序不要错了 --
script srcvue.js/script
script srcvue-router.js/script2、编写html
div idapph1Hello App!/h1p!-- 使用 router-link 组件来导航. --!-- 通过传入 to 属性指定链接. --!-- router-link 默认会被渲染成一个 a 标签 --router-link to/首页/router-linkrouter-link to/student会员管理/router-linkrouter-link to/teacher讲师管理/router-link/p!-- 路由出口 --!-- 路由匹配到的组件将渲染在这里 --router-view/router-view
/div 3、编写js
script// 1. 定义路由组件。// 可以从其他文件 import 进来const Welcome { template: div欢迎/div }const Student { template: divstudent list/div }const Teacher { template: divteacher list/div }// 2. 定义路由// 每个路由应该映射一个组件。const routes [{ path: /, redirect: /welcome }, //设置默认指向的路径{ path: /welcome, component: Welcome },{ path: /student, component: Student },{ path: /teacher, component: Teacher }]// 3. 创建 router 实例然后传 routes 配置const router new VueRouter({routes // 缩写相当于 routes: routes})// 4. 创建和挂载根实例。// 从而让整个应用都有路由功能const app new Vue({el: #app,router})// 现在应用已经启动了
/script四、axios
axios是独立于vue的一个项目基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送在node.js中可以向远程接口发送请求
获取数据
script srcvue.js/script
script srcaxios.js/script注意测试时需要开启后端服务器并且后端开启跨域访问权限
var app new Vue({el: #app,data: {memberList: []//数组},created() {this.getList()},methods: {getList(id) {//axios.get(http://localhost:8081/admin/ucenter/member)axios.get(data.json).then(response {console.log(response)this.memberList response.data.data.items}).catch(error {console.log(error)})}}
})增加文件 data.json
{success: true,code: 20000,message: 成功,data: {items:[{name: 刘洪涛,age: 15},{name: 红桃六,age: 20},{name: Hongtao Liu,age: 25}]}
}控制台查看输出
2、显示数据
div idapptable border1trtd姓名/tdtd年龄/td/trtr v-foritem in memberListtd{{item.name}}/tdtd{{item.age}}/td/tr/table
/div五、element-ui
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库方便程序员进行页面快速布局和构建
官网 http://element-cn.eleme.io/#/zh-CN
创建 test_element-ui.html
将element-ui引入到项目
1、引入css和js script srcvue.js/script!-- 引入样式 --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css!-- 引入组件库 --script srchttps://unpkg.com/element-ui/lib/index.js/script2、编写html
div idappel-button clickvisible trueButton/el-buttonel-dialog :visible.syncvisible titleHello worldpTry Element/p/el-dialog
/div 3、编写js
scriptnew Vue({el: #app,data: function () {//定义Vue中data的另一种方式return { visible: false }}})
/script
