vue
VUE
- javascript的封装库,就像jquery
- MVVM model-view-viewmodel
- 用户-view-view-model-model后台
- 数据双向绑定,数据变化,视图变化,手动视图变化,数据也会变化
- 单页面应用,即不会跳转,全都是自定义组件
VUE 属性介绍
组件定义
Vue.component("biaoqianname",
{template:'<li>hello</li>'}
)
image-20210210113357207
网络通信
计算属性,内容分发
Vue vm = new Vue({
el:"#app",
data:{
message:"xxx"
},
methods:{say: function(){}}, //{{say()}}
computed:{say2: function(){}}//{{say()}} 调用方式不同,将不经常变化的结果缓存
});
image-20210210121902355
image-20210210122009383
image-20210210122315196
自定义事件分发
image-20210210125725987
Vue-cli
脚手架,快速生成vue项目模板
- 统一目录结构
- 本地调试
- 热部署
- 单元测水,集成打包上线
npm install -g vue-cli # 安装脚手架
vue init webpack myproject # 初始化项目
npm install # 安装依赖软件包
npm run dev # 打包启动main.js 程序的入口, 里边是导入的模块,例如vue模块,以及自己写的模块等
index.html 固定不变的
index.js 一般是路由的入口
Vue router
npm install vue-router --save-dev// main.js
import Vue from "vue"
import router from "./router/index"
new Vue({
el: '#app',
router,
component:APP
})<template>
<div>
<router-link tp="/content">content</router-link>
<router-view></router-view>用于展示跳转的内容
</div>
</template>// content.vue
<template>
<h1>
内容显示
</h1>
</template>
<script>
export default{
name: "Content" // 组件名字
}
</script>
<style scoped>
</style>// index.js 路由对象的配置,导出
import Vue from "vue"
import VueRouter from "vue-router"
import Content from "content"
// 显示声明
Vue.use(VueRouter)
export defalut new VueRouter({
routes:[
{
path:'/content',
name: 'content'
componment:Content,
}
]
})实践应用
npm install vue-cli
vue init webpack myvue
npm insatll vue-router --save-dev
npm install element-ui -S
npm install sass-loader node-sass --save-dev
npm install
npm run dev本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-03-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
