# VUE - javascript的封装库,就像jquery - MVVM model-view-viewmodel - 用户-view-view-model-model后台 - 数据双向绑定,数据变化,视图变化,手动视图变化,数据也会变化 - 单页面应用,即不会跳转,全都是自定义组件 # VUE 属性介绍 - \`\`\`js Vue vm = new Vue({ el:"#app", data:{ message:"xxx" }, methods:{say: function(){}}, mounted(){axios.get("url").then(response=\>{consoole.log(response.data)})}, data(){return { info:{ name:null, // 解决前边需要info.name会不存在的情况 } }} }); \`\`\` - el:绑定的dom id - data:数据,用于数据绑定 - v-bind:title="title" - v-model用于在表单上的双向绑定 - method:方法,用于绑定 - v-on:click="say" - template - render - watch - mounted():钩子函数 异步加载,闪烁问题, \`\`\`html \`\`\` # 组件定义 \`\`\`js Vue.component("biaoqianname", {template:' * hello '} ) \`\`\` !\[image-20210210113357207\](https://cdn.jsdelivr.net/gh/Dean0731/File@main//image/image-20210210113357207.png) # 网络通信 - AXIOS,异步通信框架,实现ajax - \`\`\`js Vue vm = new Vue({ el:"#app", data:{ message:"xxx" }, methods:{say: function(){}}, mounted(){axios.get("url").then(response=\>{consoole.log(response.data)})}, data(){return { info:{ name:null, // 解决前边需要info.name会不存在的情况 } }} }); \`\`\` # 计算属性,内容分发 \`\`\`js Vue vm = new Vue({ el:"#app", data:{ message:"xxx" }, methods:{say: function(){}}, //{{say()}} computed:{say2: function(){}}//{{say()}} 调用方式不同,将不经常变化的结果缓存 }); \`\`\` !\[image-20210210121902355\](https://cdn.jsdelivr.net/gh/Dean0731/File@main//image/image-20210210121902355.png) !\[image-20210210122009383\](https://cdn.jsdelivr.net/gh/Dean0731/File@main//image/image-20210210122009383.png) !\[image-20210210122315196\](https://cdn.jsdelivr.net/gh/Dean0731/File@main//image/image-20210210122315196.png) # 自定义事件分发 !\[image-20210210125725987\](https://cdn.jsdelivr.net/gh/Dean0731/File@main//image/image-20210210125725987.png) # Vue-cli 脚手架,快速生成vue项目模板 - 统一目录结构 - 本地调试 - 热部署 - 单元测水,集成打包上线 \`\`\`shell npm install -g vue-cli # 安装脚手架 vue init webpack myproject # 初始化项目 npm install # 安装依赖软件包 npm run dev # 打包启动 \`\`\` main.js 程序的入口, 里边是导入的模块,例如vue模块,以及自己写的模块等 index.html 固定不变的 index.js 一般是路由的入口 # Vue router \`\`\`js npm install vue-router --save-dev \`\`\` \`\`\`js // main.js import Vue from "vue" import router from "./router/index" new Vue({ el: '#app', router, component:APP }) \`\`\` \`\`\`vue content 用于展示跳转的内容 \`\`\` \`\`\`vue // content.vue 内容显示 ==== \`\`\` \`\`\`js // 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, } \] }) \`\`\` # 实践应用 \`\`\`shell 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 \`\`\`