vue
推荐博客:https://www.cnblogs.com/GGGG-XXXX/articles/9467297.html
HTML 超文本标记语言 框架 css 层叠样式表 样式渲染 js 脚本语言 交互 Bootstrap css js封装 Jquery 对js进行封装 ES6的常用语法 -- 变量(变量的提升) -- var -- let 块级作用域 {} -- const 常量 不可修改 -- 模板字符串 -- 反引号`` -- 变量 ${} -- 函数 -- 普通函数this取决于函数最近的调用者 -- 箭头函数this取决当前上下文环境 -- 数据的解构 -- let [name1, name2, name3] = array; -- let {name, age} = obj; -- 注意语法 -- 类 -- class定义类 -- extends 继承 -- constructor 构造方法 -- 子类想要有this 在构造方法里执行super() Vue的常用指令 -- v-text v-html innerText innerHTML -- v-for -- v-if v-else-if v-else appendChild -- v-show display -- v-bind : v-bind指令用于设置HTML属性:v-bind:href 缩写为 :href -- v-on @ v-on 指令用于绑定HTML事件 :v-on:click 缩写为 @click -- v-model -- input -- textarea -- select -- 指令修饰符 -- .number -- .lazy -- .trim --自定义指令 -- Vue.directive("指令名称", function(el, binding){ el是绑定指令的标签元素 binding指令的信息 value 指令的值 指令修饰符 }) -- 计算属性 -- 放入内存 -- 数据改变的时候才会进行重新计算 指令后要么接数据要么接方法 -- 获取DOM -- 给标签绑定ref= "xxx" -- this.$refs.xxx 组件 ***** -- 组件的注册 -- 全局注册 -- Vue.component("组件的名称", { template: ``, data(){ return { xxx:xx } } }) -- 局部注册 -- let my_com = { tempalte: ``, data(){ return{ xxx: xxx } }, methods: {} } -- new Vue({ el: "#app", components: { my_com: my_com } }) -- 子组件注册 let child = { template: `<div><h2>这是子组件</h2></div>`, }; let father = { template: `<div> <h1>这是父组件</h1> <child></child> </div>`, components: { child: child } }; const app = new Vue({ el: "#app", components: { } }) -- 通信 -- 父子通信 -- 在父组件给子组件绑定属性 <child :money="num"></child> -- 子组件通过 props: ["money"] -- 子父通信 -- 子组件提交事件 this.$emit("事件的名称",参数) -- 父组件中给子组件绑定事件 <child @son_say="my_son_say"></child> -- 非父子通信 -- 定义中间调度器 -- let Event = new Vue() -- 其中一个组件要向中间调度器提交事件 -- Event.$emit("事件名称",要传的数据) -- 另一个组件要监听调度器中的事件 -- mounted(){ Event.$on("事件名称", function(data){ do something..... }) } -- 注意监听事件时候的this -- 混合 -- base = 把公共的代码抽出来 -- minxins = [base] -- 插槽 -- 为组件开发内容分发的接口 -- 通过slot做内容分发 路由: 注册 -- 定义一个路由和组件的匹配规则对象组成的数组 -- 实例化VueRouter对象 -- 把实例化的VueRouter对象注册的APP里 -- router-link -- router-view let routes = [ { path: "/", component: {} } ] let router = new VueRouter({ routes: routes }) new Vue({ el: "#app", router: router }) -- 展示用 <router-link to="/">首页</router-link> -- <router-view></router-view> 子路由的注册 -- children: [ { path: "xxx", component: { template: `` } } ] -- 在父路由里注册children: [{},{}] -- 在父路由的template进行子路由的展示 命名的路由 -- 注意to要进行绑定 :to="{name: 'xx'}" 路由的参数 -- path: "/user/:name" -- this.$route -- 路由的所有信息 -- fullpath -- path -- params -- query -- meta -- this.$router -- VueRouter 实例对象 -- 存放路由的方法 命名的路由视图 -- 一个路由对应多个组件 -- components: { "组件的名称":{ template: } } -- <router-view name="组件名称"></router-view> 手动更新路由 -- this.$router.push("/") 路由的钩子函数 -- router.beforeEach(function(to, from, next){ to 你要去哪 from 你从哪里来 next 你接下来要干嘛 }) -- router.afterEach(function(to, from){ to 你要去哪 from 你从哪里来 }) ***** 生命周期的钩子函数 -- beforeCreate -- created -- beforeMount -- mounted -- beforeUpdate -- updated -- beforeDestroy -- destroyed -- 数据的监听 -- watch: { 要监听的数据: { handler: function(val, oldVal){ 字符串 数组 对象 }, deep: true } } MVVM M 数据层 V 视图层 VM View-Model 给视图提供处理好的数据 MVC MTV node 本地的js解析环境 npm python 本地的python解析环境 pip 今日内容: -- npm -- 管理项目 npm init -y -- 生成 package.json -- npm install xxx@x.x.x -- npm uninstall xxx npm init -y (生成package.json文件) nmp i 根据package.json自动生成依赖的模块 -- webpack (3 , 4) -- 打包 -- 压缩代码 -- 打包浏览器解析不了的js -- npm install webpack -- npm install webpack-cli -- webpack4 手动创建入口文件 src目录下的index.js 这里用的是4 安装webpack (npm i webpack webpack-cli),安装完后node_modules 里会出现很多包 在项目目录下创建文件夹src,并在src下创建入口文件index.js(这里是单入口,可以配置多入口多出口详见博客) 使用webpack -v查看版本是否安装成功, webpack --mode development在项目目录下打包文件, development 开发者模式 打包默认不压缩代码; production 生产者模式 上线时使用,压缩代码。 默认是这个模式 打包成功后项目目录下会多一个dist目录,dist下面的main.js是默认的出口文件,main.js就是打包后的index.js及index.js引入的js文件,在dist目录下新建index.html文件,在html文件下引入main.js <script src="./main.js"></script>,这时在浏览器中打开index.html文件就会有在src中写的js的操作了 在package.json中"scripts":下添加命令,"bulid":"webpack --mode development",这样就可以使用npm run bulid来执行打包命令了,就不必每次都敲webpack --mode development了 -- vue-cli(cli3) -- npm install -g @vue/cli 下的vue-cli3 -- vue create 项目名称 -- npm run serve 全局安装npm install -g @vue/cli,使用vue -V查看vue-cli版本判断是否安装成功 创建项目vue create luffy(项目名) ,会让你选择一个js的语法解析规则,选择默认的就行,不推荐使用淘宝镜像 项目目录(luffy文件夹)下会出现node_modules,public,src文件夹,src中的main.js是入口文件,cli帮我们下了vue暴露到全局下 import Vue from 'vue' luffy文件夹下会有一个package.json,这是vue-cli生成的,在package.json中的serve对应的命令是vue-cli-service serve,可以执行npm run serve来执行这条执行,这时可以在浏览器中打开127.0.0.0:8080页面显示vue的图片 ---node_models安装的包 ---public ---index.html 唯一的页面单页面,有id为app的div盒子 <div id="app"></div> ---src ---asstes可以放图片等静态资源 ---components组件文件夹,所有的组件都放到这个文件夹下 ---App.vue 文件,总组件,这个组件包裹其他组件 ---main.js 入口文件通过h => h(App)箭头函数注册App.vue这个总组件;通过.$mount('#app')绑定作用域app 下载路由包 npm install vue-router 安装element-ui npm i element-ui -S 按照element教程在main.js中填写 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); -- vue-cli目录结构 -- node_models -- npm下载的所有的包 -- public -- index.html -- 图像 -- src -- assets 静态资源 -- components 组件 -- APP.vue -- main.js Vuex -- 集中式状态管理架构 -- 配置 -- npm install vuex -- import vuex from "vuex" -- Vue.use(vuex) -- let store = new vuex.Store({ state: { xxx: xxx }, getters: { xxx: function(state, getters){ return 处理后的数据 } }, mutations: {} }) -- const app = new Vue({ el: "#app", store: store }) -- 获取vuex中的数据 -- this.$store.state.xxx -- this.$store.getters.xxx -- 更改vuex中的数据 -- this.$store.commit("事件名称",data) -- mutations: { "事件名称": function(state, data){ state.xxx = data } } Axios -- 配置 -- npm install axios -- import axios from "axios" -- Vue.prototype.$axios = axios -- this.$axios.request({ url: "api....", method: "get", data: {}, params: {} }).then(function(data){ 注意this }).catch(function(data){ }) -- 跨域问题 restful -- REST 表征性状态转移 (资源状态转移) -- 资源 -- URI 统一资源标志符 URL 统一资源定位符 -- 统一资源接口 -- 对资源只开放一个接口 -- 根据HTTP请求方式的不同对资源进行不同的操作 -- 一定要遵循HTTP请求方式的语义 -- 前后端传递的是资源的表述 并不是资源的本身 -- Accept -- 我能够解析的数据类型 -- ContentType -- 给你响应的数据类型 -- 资源的状态 -- 通过超链接的指引来告诉用户还有哪些资源状态可以进入 -- restful -- 只要遵循这个REST风格 我们就叫做restful架构 -- 规范 10条 -- 核心思想 -- 面向资源去编程 url尽量用名词 不要用动词 -- 根据method不同对资源进行不同操作 -- 在url中体现 -- 版本 -- api -- 过滤条件 -- https -- 返回的要求 -- 携带状态码 -- 返回值 -- get 返回查看所有数据 -- post 返回新增的数据 -- put/patch 返回更新这条数据 -- delete 返回值为空 -- 返回携带错误信息 -- 携带超链接