Vue 基本语法和原理,项目设计
州本合
每天告诉自己进步一点点。
展开
-
1-1Vue购物车(商城核心页面的知识点记录) axios 使用
一。使用axios 和vue-axios 来获取static/mock/ 数据。我们要知道只有static文件夹可以被外部访问到。所以我们先把假数据放在static/mock下面 然后在methods里面定义获取的方法,然后在mounted(){}中使用。因为整个Vue实例已经初始化完成了。 methods:{ // 拉取数据 会把axios 挂载到vue实例化对象中上面去 cartInit(){ // 这是发送一个GET 请求 返回的是promi..原创 2020-05-27 16:51:52 · 199 阅读 · 0 评论 -
Vue优点
Vue 具有易用性 灵活性 高效性1.易用性: <div id="app">{{message}}</div>var app = new Vue({ el:'#app', data:{ message:'Hello Vue' } })2.灵活性:声明了message 然后在view视图层 我们就渲染上去了。(声明式组件)组件系统(具有复用性) 多个页面的跳转 我们就需要使用客户端路由,状态管理(vuex)项目庞.原创 2020-05-27 16:41:57 · 673 阅读 · 0 评论 -
1-6 计算属性(computed) 方法(method) 侦听器() 计算属性中的get set 用法
1.计算属性(存在缓存机制,性能高,代码精简)computed:{ 计算属性中 函数中的变量 如果没有变化的话,那么就不会在重新执行 这就是具备缓存机制的 fullName:function(){ console.log("计算了一次"); return this.lastName+' '+this.firstName; ..原创 2020-05-26 18:00:02 · 175 阅读 · 0 评论 -
1-5基本方法
1.父组件向子组件传值:(数据)通过:v-bind:形式来进行数据的传递,父组件给子组件传值,子组件一定接收2..子组件向父组件传值:(触发事件)通过this.$emit() 通过触发事件,父组件恰好在监听,监听过后,就能带出来的内容。从而实现子组件向父组件传递的功能3.模板语法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2020-05-26 16:59:25 · 116 阅读 · 0 评论 -
1-3MVC MVVM MVP和1-4(组件化概念)
1-3:MVVM MVP都是有MVC延伸而来的,都是之前比较老的框架,使用的是MVC.MVP 是Jquery 框架的思想 MVVM 是Vue 思想 上图解释。一:MVC(1)View 传送指令到 Controller(2)Controller 完成业务逻辑后,要求 Model 改变状态(3)Model 将新的数据发送到 View,用户得到反馈。所有通信都是单向的。二:MVP(1)各部分之间的通信,都是双向的。(2)View 与 Model 不发生联系,都通过 ...原创 2020-05-25 20:47:44 · 128 阅读 · 0 评论 -
1-1和1-2
1-11.HelloWorld 当我们想实现 打印HelloWorld的时候,我们使用原生的JavaScript方式实现的方式是: <div id="app"></div> <script> // 获取DOM 节点 var app = document.getElementById("app"); // ES5 插入内容 app.innerHTML = "HelloWorld"; &原创 2020-05-25 17:44:26 · 134 阅读 · 0 评论 -
Vue基础复习二
列表渲染,可以遍历对象和数组:在同一个标签中,不能同时使用v-if和v-for. v-for 再带的属性:key 这个不能乱用 尽量使用 结构中唯一的key。<template> <div> <p>遍历数组</p> <ul> <li v-for="(item,index) in listArr" :key="item.id"> {{index}}----- {{item.id}.原创 2020-05-24 16:57:33 · 97 阅读 · 0 评论 -
Vue 基础复习一
1. 插值 表达式 动态属性(setAttribute JSES5) v-html(理解是innerHTML(JSES5))实例如下:<template> <div> <!-- 第一知识点 插值 --> <p>插值 {{message}}</p> <!-- 第二知识点 表达式 --> <p>JS {{age?'yes23':'no'}...原创 2020-05-24 09:36:22 · 305 阅读 · 0 评论