README

我的错题本

01、不能在main.js中乱敲打回车

02、vue is not defind

我的解决办法就是：使用vue ui 创建一个新项目的时候，手动选择vue2.x版本，就可以正常运行了

03、Trailing spaces not allowed

what

why
这里我尾随了空格

04、在开发vue项目是，hbuilderX 和 Vs code自动重排代码格式导致语法不兼容报错问题的解决办法

一、hbuilder解决办法

在hbuilderX中安装改插件eslint-plugin-vue - DCloud 插件市场

二、vs code解决办法

在项目中的根路径创建一个文件去规范格式化文档的准则

这个文件的话呢，他就可以用来规定项目格式化的时候，用什么样的方式，进行格式化
文件内部是一个以对象的形式数据
"semi": false,
    你需不需要在每一句代码后面加上分号呢，默认情况下，我们是不是给每一代码后面都加上了分号
    这合不合适呢？不合适，为什么呀，在eslint里面他要求我们不要给代码加分号，
    所以我们给他"semi": false，所以就是说，每一句代码后面不加分号，true就是加分号
    false 就是不加分号
"singleQuote": true
	代码的规范是双引号引起我们的字符串，但是啊，eslint要求我们使用的是单引号
	singleQuote：这是单引号的意思，值是true，这样就ok了

忽略函数与括号之间没有空格导致的报错
- 参考：(3条消息) eslint规则修改：函数括号前必须加空格的规则修改_码畜0.0的博客-CSDN博客

'space-before-function-paren':0

05、组件名称命名不规范

06、vue项目报错：Unexpected tab character (no-tabs)

vue项目报错：Unexpected tab character (no-tabs) - 风干记忆 - 博客园 (cnblogs.com)

07、 Expected indentation of 2 spaces but found 1 tab

(4条消息) Expected indentation of 2 spaces but found 1 tab解决方案（个人亲测有效）_柳暗花溟的博客-CSDN博客

_@_day01

00、如何查看本机IP地址

win+i打开设置，
命令行：ipconfig/all

01、方向目标

电商PC端平台

平台利用MVVM（Vue.js）框架,使用element-ui前端框架，通过后台提供的开放式 API实现PC版商城。

平台主要功能如下

02、Vue

1、Vue.js 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。

2、Vue.js 安装

独立版本
- 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入。
- [下载](https://v2.cn.vuejs.org/v2/guide/installation.html#Vue-Devtools)Vue.js （开发版本）
使用 CDN 方法
- 以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
  - Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
  - unpkg(推荐)：https://unpkg.com/vue@2.6.14/dist/vue.min.js
  - cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
vue的引入

<script src="独立版本的地址||cdn的地址"></script>

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npmmirror.com

3、Vue.js 目录结构

Vue.js 目录结构 | 菜鸟教程 (runoob.com)

4、Vue.js 起步

语法格式：

var vm = new Vue({
    // 选项
  })

实例1：

接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>site : {{name}}</h1>
            <h1>url : <a href="http://old.hsxy.edu.cn/">{{url}}</a></h1>
            <h1>{{computer()}}</h1>
        </div>
        <script>
           	new Vue({
                el: '#app',
                data: {
                    name: '徽商职业学院',
                    url: 'http://old.hsxy.edu.cn/'
                },
                methods: {
                    computer: function() {
                        return this.name + '-重德弘商 砺学躬行'
                    }
                },
            });
        </script>
    </body>
</html>

可以看到在Vue 构造器中有一个el 参数，全称Element(元素)，在上面实例中 id 为 app，这里指定到他el: '#app',在 div 元素中：<div id="app"></div>,这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响
- 理解部分：
  - 1、Vue.js是一个构造函数，编程中称之为构造器
  - 2、每一个new Vue () 都是一个Vue构造函数的实例，这个过程叫做实例化
接下来我们看看如何定义数据对象。
- data 用于定义属性，实例中有二个属性分别为：site、url
- methods 用于定义的函数，可以通过 return 来返回函数值
- {{ }} 用于输出(对象data)，(属性site)和函数返回值

<h1>site : {{ name }}</h1>
<h1>url : <a href="http://old.hsxy.edu.cn/">{{ url }}</a></h1>
<h1>{{ computer() }}</h1>

实例2：

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象，它能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象！
    document.write(vm.site === data.site) // true
	document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob
    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>
</body>
</html>

实例3：

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我们的数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})
 
document.write(vm.$data === data) // true
document.write("<br>") 
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>

理解：带$符的都是vue自带的属性，他的作用于方便分辨

5、Vue.js 模板语法

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

理解：
    什么是**DOM?**
    DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。
    HTML的文档document页面是一切的基础，没有它dom就无从谈起。**
    当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。
    在这个文档对象里，所有的元素呈现出一种层次结构，就是说**除了顶级元素html外，其他所有元素都被包含在另外的元素中。

$插值

#文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

文本插值
<div id="app">
  <p>{{ message }}</p>
</div>

理解：**massage**这里是一个变量，中文翻译：消息提示

#Html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 **v-html**指令：

<div id="app">
			<div v-html="massage">
			</div>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					massage: '<h1>我是大英雄</h1><h2>test</h2>'
				}
			})
		</script>

#属性

{{...}}无法作用在 HTML 属性上，遇到这种情况应该使用 [v-bind](https://v2.cn.vuejs.org/v2/api/#v-bind) 指令：

实例1

静态的去绑定class属性
语法格式：

v-bind:class="类名"
在data里进行声明；类名即可

HBuilderX练习：

<div id="app">
			<p v-bind:class="color">猜猜看这是什颜色
			</p>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					color: 'red'
				}
			})
		</script>

实例2

动态的去绑定class属性，如果use的值为true，则应用class属性
语法格式：

v-bind:class="{'类名':布尔值,类名：布尔值}"
{}内的,'',可以省略
布尔值，在data对象内进行声明

HBuilderX练习：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

拓展

<!-- ------------------------------------------------- -->
			<!-- 分割线 -->
			<!-- 静态的绑定多个 -->
			<div v-bind:class='["da","db"]'>
				我是傻逼
			</div>
			<!-- ------------------------------------------------- -->
			<!-- 分割线 -->
			<!-- 内联样式绑定 -->
			<!-- :style是v-bind:style的简写 -->
			<div :style="{color:color,background: ok?'red':'green'}">
				你是傻逼
			</div>

#使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

（理解）三元运算符
- 三元运算符，也是一个常用的知识点，
- 理解：{{今天是你生日吗？如果是那么祝你生日快乐:如果不是那么同样祝你今天快乐}}
- 注意：问好前面可以是一个变量，变量的值可以是true，或false，应该是布尔类型，试用于比较运算

{{ ok ? 'YES' : 'NO' }}

HBuilderX练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
<body>
		<div id="app">
			<p>{{number + 1}}</p>
			<p>
				{{ok?'对的':'错的'}}
				<br>
				{{1===2?'对的':'错的'}}
				<br>
				{{1===1?'对的':'错的'}}
			</p>
       	<!-- ----------------------------- -->
		<!--
		 01、变量.split('')，将我的名字进行拆分，以没有任何内容的方式进行下拆分，
			理解：讲heduanlong拆分成字母，.split函数会返回一个数组，
		 02、.reverse函数将数组内的字母反向排列，
		 03、.join函数将数组内的字母结合一个字符串
		 -->
		<p>{{ message.split('')}}</p>
		<p>{{ message.split('').reverse()}}</p>
		<p>{{ message.split('').reverse().join('')}}</p>
		<!-- ----------------------------- -->
	</div>
     <script>
		let vm = new Vue({
			el: '#app',
			data: {
				number: 12,
				ok: false,
				message: 'heduanlong'
			}
		});
	</script>
</body>

$指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

$参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

$修饰符

修饰符是用.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
HBuilderX练习部分

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if='seen'>你能看得到我吗?</p>
			<a v-bind:href='url'>徽商职业学院</a>
			<!-- 使用@cilick指令，可以为某一个元素,绑定对应的事件 -->
			<!-- .stop就是vue.js中的修饰符 ,子级函数，不会影响到父级
				这里给click2添加修饰符，那么click1的方法就不会执行
				理解：当前的click事件，一旦执行完毕，就会停下来
			-->
			<div @click='click1'>
				<div @click.stop='click2'>
					<button>click me</button>
				</div>
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					seen: true,
					seen: false,
					url: 'http://old.hsxy.edu.cn/'
				},
				methods: {
					click1: function() {
						console.log('click1......')
					},
					click2: function() {
						console.log('click2.....')
					}
				}
			});
		</script>
	</body>
</html>

$过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

$v-on(指令)

v-on指令用来监听DOM事件，将事件与vue实例相结合。

语法格式

//第一种写法格式
v-on:click="sayhello()"
//第二种写法格式
@click="sayhello()"
@click="sayhello"

$v-mode(指令)

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

$缩写

#v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

#v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

6、条件语句

条件判断

v-if

条件判断使用 v-if 指令：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
可以用 v-else 指令给 v-if 添加一个 "else" 块：

v-else 指令

随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
判断 type 变量的值：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

7、循环语句

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
语法格式：

参数为索引：
v-for
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

一个小实例

<div id="app">
			<!-- ------------------ -->
			<!-- 1 -->
			<ul id="example-1">
				<li v-for="item,index in items">
					{{index}} {{ item.message }}
				</li>
			</ul>
			<!-- ------------------ -->
			<!-- 2 -->
			<ul>
				<li v-for="(item,key) in o">
					{{key}}：{{ item }}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					// 1
					items: [{
							message: 'da'
						},
						{
							message: 'da1'
						}, {
							message: 'da2'
						},
					],
					// 2
					o: {
						test: '1',
						test1: '3',
						test2: '1',
					}
				}
			})
		</script>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
理解：加上不容易出错，就先这样吧

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

<div id="app">
			<div>
				<ol>
					<li v-for="(value,key) in object">
						{{key}} : {{value}}
					</li>
				</ol>
			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					object: {
						学校名称: '徽商职业学院',
						链接: 'www.baidu.com',
						校训: '重德弘商，励学躬行'
					}
				}
			})
		</script>

v-for 迭代整数

v-for 也可以循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

8、计算属性

计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：

语法格式

<p> {{message这个文本插值的名称}}</p>
<p> {{计算属性的插值名称}}</p>
var vm = new Vue({
  el: '#app',
  data: {
    message:'sa'
  },
  computed: {	
    //这里需要注意的是插值名称，千万不要混，是啥就写啥就行了，别和data中的文本插值搞混了就行了，千万要注意
    插值名称: function () {
        return this.message.siplt("")
    }
  }

实例 1

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：

实例 2 （getter）

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter								
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

实例 3
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

实例 3（getter setter）

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ site }}</p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					name: 'Google',
					url: 'http://www.google.com'
				},
				computed: {
					site: {
						// getter
						get: function() {
							return this.name + ' ' + this.url
						},
						// setter
						set: function(newValue) {
							let names = newValue.split(' ')
							this.name = names[0]
							this.url = names[names.length - 1]
						}
					}
				}
			})
			// 调用 setter， vm.name 和 vm.url 也会被对应更新
			vm.site = '菜鸟教程 http://www.runoob.com';
			document.write('name: ' + vm.name);
			document.write('<br>');
			document.write('url: ' + vm.url);
		</script>
	</body>
</html>

**.split(' ')**将传进来的参数进行，拆分,括号里以什么方式进行拆分，这里是以空格的形式进行拆分，所以拆分的结果：
- 以前我对它的认知程度不够，以为他就是那样的，没想到还可以选择什么方式进行拆分
names[names.length - 1]这里数组长度原本是2，减去1，当然就是1了，或者可以直接写成这样
names[0]，也许这样会让我好理解些
**computed**这是一个计算属性，他是死的，必须要这样写

9、监听属性 $watch

watch,翻译过来就是观察，他可以观察一个变量的变化，并且能够为我们获取变化之前和变化之后的结果

语法格式

new
vm.$watch("value",function(newvalue,oldvalue){
				//主体
			})
old

实例 1

<div id="app" style="text-align: center;">
			<p style="font-size: 35px;">{{message}}</p>
			<button v-on:click="message++" style="font-size: 35px;">单击</button>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					message: 0
				},
			})
			vm.$watch("message", function(xin, jiu) {
				console.log(xin, jiu)
			})
		</script>

实例 2

虽然计算属性在大多数情况下更合适，但有时也需要一个**自定义的侦听器**。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="computed_props">
			千米 : <input type="text" v-model="kilometers">
			米 : <input type="text" v-model="meters">
		</div>
		<p id="info"></p>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#computed_props',
				data: {
					kilometers: 0,
					meters: 0,
				},
				// 这里这个watch自定义监听器
				watch: {
					kilometers: function(val) {
						this.kilometers = val;
						this.meters = this.kilometers * 1000
					},
					meters: function(val) {
						this.kilometers = val / 1000;
						this.meters = val;
					}
				}
			});
			// $watch 是一个实例方法
			vm.$watch('kilometers', function(newValue, oldValue) {
				// 这个回调将在 vm.kilometers 改变后调用
				document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
			})
		</script>
	</body>
</html>
有一点bug，这渲染的太快了了，观查不到

innerHTML与innerText区别

示例：

<html>
	<head><title>innerHTML</title></head>
	<body>
		<div id="d1"><p id="p1">hello world </p></div>
		<script>
			var content = document.getElementById("d1");
			alert(content.innerHTML);
			alert(content.innerText)
		</script>
	</body>
</html>

运行结果：<p id="p1">hello world </p>和 hello world
总结：
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

10、样式绑定

Vue.js 样式绑定 | 菜鸟教程 (runoob.com)

11、Vue.js 事件处理器

Vue.js 事件处理器 | 菜鸟教程 (runoob.com)

12、Vue.js 表单

参考：

Vue.js 表单 | 菜鸟教程 (runoob.com)
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。

实例 1（输入框）

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

实例 2（复选框）

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

以下实例中演示了复选框的双向数据绑定：
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

总结：多个复选框需要在在input中添加value属性

实例 3（单选按钮）

以下实例中演示了单选按钮的双向数据绑定：

<div id="app">
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

13、Vue.js 组件

组件介绍

组件是可复用的 Vue 实例，在我们的开发过程中，我们可以把经常重复的功能**封装成组件**达到快捷便捷开发的目的。
Vue.js使用Vue.component去创建一个组件，component的第一个参数是组件的名称，第二个参数是以对象的形式去描述一个组件。
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件命名

第一种(短横线分隔命名)
<my-component-name></my-component-name>
第二种(首字母大写命名)
<MyComponentName></MyComponentName>

语法格式

Vue.component("自定义组件名称",{
    template:""
})

实例 1

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
            <!-- 使用HTML标签的形式去调用组件，标签的名称就是组件的名称 -->
			<heduanlong></heduanlong>
		</div>
		<script>
            //16~22行的对象，描述了整个组件的数据和模板内容
			Vue.component("heduanlong", {
				data: function() {
					return {
						count: 0
					}
				},
				template: "<button v-on:click='count++' >You can click me {{count}} times</button>"
			})
			let vm = new Vue({
				el: "#app",
			})
		</script>
	</body>
</html>

延续上面的组件案例为它定义一个属性

<div id="app">
            <!-- 03、通过组件的属性对这个组件进行赋值 -->
			<heduanlong title="hahahha"></heduanlong>
		</div>
		<script>
			Vue.component("heduanlong", {
                //01、为组件定义一个属性
				props: ['title'],
				data: function() {
					return {
						count: 0
					}
				},
                //02、在模板内，对此属性进行应用和渲染
				template: "<button v-on:click='count++' >{{title}}You can click me {{count}} times</button>"
			})
			let vm = new Vue({
				el: "#app",
			})
		</script>

为它再添加一个其他的元素

创建一个组件我们需要注意，一个组件的模板必须具备一个根节点。

没有根节点的样子，button受影响，不能成功渲染

template: "<h1>hello weorld</h1><button v-on:click='count++' >{{title}}You can click me {{count}} times</button>"

有根节点的样子，button不受影响，成功渲染

template: '<div><h1>Hello World</h1><button v-on:click="count++"> {{title}} You can click me {{count}} tiems</button></div>'

组件的事件监听

<div id="app">
			<!-- 2、在组件的父级，就可以通过事件绑定的方式去接收到$emit函数所触发的事件 -->
			<heduanlong title="text" @click="clicktest1"></heduanlong>
			<script>
				Vue.component('heduanlong', {
					props: ['title'],
					data: function() {
						return {
							count: 0
						}
					},
					template: "<div><h2>test</h2><button v-on:click='clicktest'>{{title}} {{count}}</button></div>",
					methods: {
						clicktest: function() {
							this.count++;
							// 1、通过this对象$emit函数去触发一个事件，它的第一个参数是事件的名称， 第二个是可携带的一些参数，，，事件名的首字母不能大写，好吧必须是全小写！！！
							this.$emit('click', this.count)
						}
					}
				});
				let vm = new Vue({
					el: '#app',
					data: {
					},
					// 3、在界面上同样使用methods函数，去声明clicktest函数
					methods: {
						clicktest1: function(e) {
							console.log(e)
						}
					}
				})
			</script>

在组件内部插入，其他的html标签

<div id="app">
		<heduanlong title="text">
			<!-- 2、添加您需要的标签 -->
			<p>this is test</p>
		</heduanlong>
	</div>
	<script>
		Vue.component('heduanlong', {
			props: ['title'],
			data: function() {
				return {
					count: 0
				}
			},
			// 1、template中添加<slot></slot>
			template: "<div><button v-on:click=count++>{{title}} {{count}}</button><slot></slot> </div>"
		});
		let vm = new Vue({
			el: '#app',
			data: {
			}
		})
	</script>

全局组件vs局部组件的语法格式

<div id="app">
			<button-counter></button-counter>
			<test></test>
		</div>
		<script type="text/javascript">
			// 1、全局注册的组件
			Vue.component('button-counter', {
				props: ['title'],
				data: function() {
					return {}
				},
				template: '<div><h1>全局注册的组件</h1></div>',
				methods: {
				}
			})
			var vm = new Vue({
				el: "#app",
				data: {
				},
				methods: {
					clicknow: function(e) {
						console.log(e);
					}
				},
				// 2、局部注册的组件
				components: {
					test: {
						template: "<h2>局部注册的组件</h2>"
					}
				}
			});
		</script>

14 、单文件组件

介绍

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue 的简单实例：

目录结构

vue框架目录结构（全）_灵活的小胖zhi的博客-CSDN博客_vue框架目录结构
**src** 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
**components** 整个项目的组件目录
**App.vue** 项目入口文件，去完成了对组件的引入工作
**HelloWorld.vue** 单文件组件

新建一个单文件组件

第一步：在components文件夹中创建一个test 的自定义组件

<!-- 1、视图区域（Dom结构） -->
<template>
	<h2 class="red">test...{{msg}}</h2>
</template>
<!-- 2、脚本区域（javascript脚本） -->
<script>
	// 2.1、在script里，我们可以为这个组件，声明这个组件的，‘属性’，‘数据’，‘方法’
	export default {
		name: 'HelloWorld',
		// 属性
		props: {
			msg: {
				// 类型
				type: String,
				// 默认值
				default: '你是傻逼吧'
			}
		},
		// 2.2、为这个组件注册对应的方法
		methods: {
		},
		// 2.3、为这个组件注册对应的数据
		data() {
			return {
			}
		},
	}
</script>
<!-- 3、样式区域（Css样式） -->
<style>
	.red {
		color: red;
	}
</style>

第二步在App.vue 中引入自己自定义的组件

<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<HelloWorld msg="Welcome to Your Vue.js App" />
		<!-- 3、在模板里使用test标签，调用自己刚刚写的组件了 -->
		<test></test>
	</div>
</template>
<script>
	import HelloWorld from './components/HelloWorld.vue'
	// 1、引入
	// 从'./components/test.vue'这个地址，导入test，单文件组件
	import test from './components/test.vue'
	export default {
		name: 'app',
		components: {
			HelloWorld,
			// 2、注册,这个叫局部注册
			test
		}
	}
</script>
<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

15、免终端开发Vue应用（有时间再看吧）

Vue.js 教程 (dcloud.io)

目录结构

创建一个新项目

在**HBuilderX** 中
文件 - 新建 - 项目-uni-app(默认模板)

16、Vue Router

[01] [什么是Vue-Router]

vue-router就是单页面网页应用程序路径的管理系统，简称SPA（single page application）

[02] [单页面路由的起步]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<!-- 
    代码梳理：
        01、引入vue和vue-router
        02、注册vue-router
        03、创建router 实例，然后定义routes配置
        04、定义路由组件
 -->
<body>
    <div id="app">
        <router-link to="/foo">Go to Foo</router-link>
        <router-view></router-view>
    </div>
    <script>
        // 定义路由组件的内容
        const foo = {
            template: '<h1>test</h1>'
        }
        // 创建VueRouter实例，然后定义routes配置
        const router = new VueRouter({
            routes: [
                { path: '/foo', component: foo },
            ]
        })
        var vm = new Vue({
            el: '#app',
            router
        })
        vm.mount('#app')
    </script>
</body>
</html>

[03] [VueRouter的工作原理]

# 单页面应用（SPA）的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。
# 在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。
# hash模式
	vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值，称为hash值。

[04] [路由的对象属性]

this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。
this.$route表示当前正在用于跳转的路由器对象，可以访问其name、path、query、params等属性。

编程式导航

01、<router-link> 这种是声明式导航
02、router.puth() 这个就是编程式导航了

02、安装

npm install vue-router@4

03、实例入门1

12.路由-路由redirect重定向的使用_哔哩哔哩_bilibili

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 第一步：引入vue和vue-router -->
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login' tag='button'>首页</router-link>
			<router-link to='/register'>注册</router-link>
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			// -----------定义组件---------------
			let login = {
				template: '<h1>我是登录组件</h1>'
			}
			let register = {
				template: '<h1>我是注册组件</h1>'
			}
			// 第二步，配置路由
			// 这里的VueRouter(),是在我引入Vue-Router，是自动产生的一个构造函数，叫VueRouter()
			let routerobj = new VueRouter({
				routes: [
					// path定义路径，component定义组件
					{
						path: '/login',
						//  然后现在去定义这个组件
						component: login
					},
					{
						path: '/register',
						//  然后现在去定义这个组件
						component: register
					}
				]
			})
			//创建Vue实例就得到了一个view model
			let vm = new Vue({
				data: {
				},
				router: routerobj
			}).$mount('#app')
		</script>
		<style>
			#app {
				font-size: 55px;
				text-decoration: none;
			}
			button {
				font-size: 55px;
			}
		</style>
	</body>
</html>

17、微商城项目

04、使用脚手架创建项目

# Shift + 鼠标右键 （在此处打开PowerShell窗口）
	## vue ui (在此处打开vue-cli用户界面)
		### 在此创建新项目

06、安装mint-ui,mui,sass

mint-ui组件库官网：https://mint-ui.github.io/docs/#/zh-cn2
mui框架下载地址：dcloudio/mui: 最接近原生APP体验的高性能框架 (github.com)

# 01. 安装mint-ui移动组件库
	npm install mint-ui@2.2
# 02. 在main.js中导入Mint-ui组件库
    import MintUI from 'mint-ui'
    // 把他对应的样式也导入进来
    import 'mint-ui/lib/style.css'
    // 注册mint-ui
    Vue.use(MintUI)
# 03. 下载mui框架
	## 把\mui-master\dist下的文件，复制到\vue-shop\src\lib\mui
		// 导入mui框架样式
		import './lib/mui/css/mui.css'
# 04. 安装sass （ css的预处理器 ）
	npm install sass-loader@8.0 -D
	npm install node-sass@4.13 -D
	npm install sass@^1.3.0 -D
	npm install fibers@>=3.1.0 -D
		## 在style中对应的写法
            <style lang="scss" scoped>
                #app {
                  #tt {
                    color: red;
                  }
                }
            </style>

08、网页标题灵活变化

router.beforeEach((to, from, next) => {
	if (to.meta.title) {
		document.title = to.meta.title
	}
	next()
})

10、添加动画效果

<transition name="fade">
				<!-- 2、最终的视图渲染位置 -->
				<router-view />
			</transition>
<style>
/* ---------------------动画效果------------------------- */
  /* 进来 */
  .fade-enter {
    /* 透明度 */
    opacity: 0;
    /* 移动效果 */
    transform: translateX(100%);
  }
  /* 离开 */
  .fade-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }
  .fade-enter-active,
  .fade-leave-active {
    /* 所有的动画都是以0.7秒去完成 */
    transition: all 0.7s ease;
  }
</style>

12、封装一个轮播图组件

# 01、封装一个轮播图组件去用于展示轮播图
# 02、在主页去引入组件

13、安装axios

发送请求，得到服务器轮播图数据，赋值给当前的imgList

# 轮播图最终的效果
- 从服务器拿到轮播图
- 然后再把轮播图放在 我们的组件当中进行展示
# 安装axios（可以拿到轮播图的图片）
	npm i axios@0.19
	## 配置axios
		在src目录下新建文件`axios.js`(专门用来处理`axios`一些相关的配置)

3、注册到main.js

01、项目概述

04、

安装vscode插件：vutur
在当前文件夹中，鼠标右键在终端中打开，输入命令vue ui，创建一个新的项目，之后可以在ui里直接运行

05、目录的结构

main.js 项目主要的一个文件
App.vue 项目打开的第一个页面
assets 图标文件
components 组件文件
router 路由的一个处理文件
store 处理Vuex的文件
views 页面相关的一些内容

06、安装mint-ui,mui,sass

下载mint-ui移动组件库

npm install mint-ui@2.2

在main.js中导入Mint-ui组件库

// 导入mintui组件库
import MintUI from 'mint-ui'
// 把他对应的样式也导入进来
import 'mint-ui/lib/style.css'
// 注册mint-ui
Vue.use(MintUI)

打开官网进行使用Mint UI (mint-ui.github.io)
下载mui框架：dcloudio/mui: 最接近原生APP体验的高性能框架 (github.com)
1. 然后把\mui-master\dist下的文件，复制到\vue-shop\src\lib\mui

最后在main.js中导入
// 导入mui框架样式
import './lib/mui/css/mui.css'

安装sass（一直都是安装失败！！！）

npm install sass-loader@8.0 -D

//继续安装
npm install node-sass@4.13 -D

//继续安装
npm install sass@^1.3.0 -D

//继续安装
npm install fibers@>=3.1.0 -D

07、梳理代码

重置app.vue入口代码

<template>
  <div id="app">
    <div class="container">
      <router-view />
    </div>
  </div>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* 加上这样的一个样式作为通用效果 */
  box-sizing: border-box;
}
.container {
  padding-top: 40px;
  padding-bottom: 50px;
  overflow-x: hidden;
}
</style>

重置router/index.js代码（主要删除了about的路由配置）

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]
const router = new VueRouter({
  routes
})
export default router

重置home页

<template>
  <div class="home">
      这里是home主页
  </div>
</template>
<script>
export default {
  name: 'HomeView'
}
</script>

08、设置头部内容以及文档标题

设置头部的标题（找到组件库的代码复制到app.vue上）
打开自动跳转到主页
1. 在路由配置文件中进行重定向，自动指向下面的路径
自动更新网页标题

09、添加底部tabbar组件

从官网拿到一个底部选项卡tabbar导入到项目
修改底部栏的文字内容
实现点击底部栏跳转界面
添加2个新的组件（购物车shopcard）（我的User），然后配置路由

10、设置tabbar切换效果

问题描述：点击底部按钮会有变色的样式效果
问题解答：在路由配置文件中，添加第6行的带代码
const router = new VueRouter({
	routes,
	// 给当前的路由添加一个类名，点击a页面，a页面就会有这个class
	linkActiveClass: 'mui-active'
})

更改底部按钮默认图标为自己喜欢的样式
1. 在这里找到自己喜欢的图标：UI组件 · MUI (dcloud.net.cn)
  2. 由于第三个购物车是拓展图标，需要在main.js导入
  3. 清空购物车上的数字
  4. 切换页面时添加一个动画效果

<!-- 1、头部 -->
   			<mt-header fixed :title="$route.meta.title"></mt-header>
   			<!-- 1、身体动画效果 -->
   			<transition name="fade">
   				<!-- 2、最终的视图渲染位置 -->
   				<router-view />
   			</transition>
   			<!-- 1、底部 -->
   			<tabbar></tabbar>
   
他的样式style部分
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
需要注意的是第4行是name，不是class

11、添加返回按钮和解决eslint报错

出了主页，其他页面的顶部都添加一个返回按钮
1. 在顶部区域添加一个返回按钮
  1. 组件库链接：Header (mint-ui.github.io)
  2. 复制下面的代码到app.vue的对应位置
  3. 由于使用router-link会报错所以可以把他改成span标签也是可行的
  4. 取消主页的返回按钮
    4. 然后就所有页面都不显示了，解决办法，在下面加一一个生命周期函数，相关部分代码

// 一个错误的写法data是一个函数，有办法直接在里面直接以键值对的方式去声明
   		// data() {
   		// 	showBack: false
   		// },
   		// ----------------------------
   		// 这里要以函数的形式去声明showBack的值
   		data() {
   			return {
   				showBack: false
   			}
   		},
   		// 因为这个只会在页面切换时执行一次，所以要加一个watch观察器
   		created() {
   			this.showBack = this.$route.path !== '/home'
   		},
   		watch: {
   			'$route.path'(newVal) {
   				// 新的值不等于home，就返回true，反之亦然
   				this.showBack = newVal !== '/home'
   			}
   		},

     1. 给按钮添加一个点击事件

定义点击事件				
<span slot="left" @click="goBack" v-show='showBack'>
	<mt-button icon="back">返回</mt-button>
</span>
编写点击方法
		methods: {
			goBack() {
				// 通过go方法退后一个访问页面
				this.$router.go(-1)
			}
		},

12、封装一个轮播图组价

每一个m ui组件都会有一个默认的类名
~~nodesass 安装失败，浪费了很多时间，决定放弃了~~
- 已解决是sass版本不兼容导致的问题
- cnpm i sass-loader_@_10.x --save-dev

13、安装axios

轮播图最终的效果
- 求服务器拿到轮播图
- 然后再把轮播图放在我们的组件当中进行展示
axios（可以拿到轮播图的图片）

安装：npm i axios@0.19

3、注册到main.js

14、完成轮播图功能（12:26）

使用axios获取服务器的数据，然后将服务器的轮播图数据，展现在页面当中
发生位置错误（暂且放弃）

15、完成快速导航按钮的布局（10:06）

把复制过来的代码a标签改成route-link
span标签放图片的改为img标签

16、完成我的页面布局（06:12）

这页面布局写的真的让我惊到了！！！

17、登录页面布局（12:20）

编程式路由导航

18、看不下去了，暂且完结散花吧！！！

18、VueX

学而不思则罔，思而不学则殆

[01] [什么是 Vuex ]

基本概念

Vuex就是状态管理工具，可以方便的实现组件之间的数据的共享。

语法格式

# 创建store实例
+ store构造函数是在Vuex下边de，所以是new Vuex.Store 来取实例化store对象
------
const store = new Vuex.Store({
	state:{}
	mutations:{}
})

[02] [Vuex 的下载和安装]

One. 通过`<script>`标签的src属性引入。

# 01、vuex.js单文件引用
<script src="vue.js"></script>
<script src="vuex.js"></script>
# 02、使用vuex数据
  <div id="app">
    <p>{{this.$store.state.name}}</p>
  </div>
# 03、创建实例对象store，之后挂载到vue里面
   	var store = new Vuex.Store({   //和vue一样里面有很多的选项
      state: {		//state是一个状态选项，是用来存储数据的，他是一个对象，里面可以定义多个数据
        name: 'vuex.js直接引用'
      }
    })
# 04、挂载store实例（vue里面也有 Store 选项用来挂载store实例）
    var vm = new Vue({
      el: '#app',
      store		//这个是 store:store 的简写，`当key和value 的值 一样时就可以这样`简写`
    })
# 总结
	凡是在vm当中的 选项 ,都是通过$去获取的，例如 $store , $el 等等,去获取一个对应的 ·对象·
# 💢💢💢错题本
	创建store实例对象的时候，Vuex.Store, 中的 V 和 S都是需要大写的！！！
	其次即使**手动挂载**到vue实例对象中，他的单词是 ··· 
		.$mount('#app'),或者另起一行
		vm.$mount('#app')

升级（进化）

# 如果 state 中的数据用的比较多的话，你可以先把他变成一个计算属性（computed）以后用的话把他当成一个计算属性去用就好了
# 01、vm修改部分
      // 创建一个vm实例对象
      var vm = new Vue({
        store: store,
     	//添加计算属性
        computed:{
          age(){
            return this.$store.state.age
          }
        }
      });
      vm.$mount("#app");
# 02、然后就可以这样的去使用数据了
<p>{{ age }}</p>

再进化 （因为当一个 state 选项中，有多个数据时，将这些数据都声明为计算属性有些麻烦，这时候可以使用mapState 辅助函数来生成计算属性

# mapState 状态映射，他可以帮你生成计算属性，就不需要你自己去写了，他是一个方法，里面可以定义多个key和value，
        computed: Vuex.mapState({
          // key就是 计算属性的名字
          // value就是`箭头函数` 将state数据返回
          //第一个state就是， store实例对象中的state，所以后面可以直接 state.age
          age: state => state.age 
        }),

Two. npm安装

# 01、安装
	npm install vuex@3.1.1 --save //--save代表生产模式
# 02、创建store\index.js文件，用来导出store实例
	import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({
      state: {name: '正在使用Vuex'}
    })
# 03、在src\main.js文件，添加store实例对象。
	import store from './store' //最后的地址指向这个文件夹，他会默认导入文件夹下的inde.js
	##03-1、把store实例中注册到vue中
# 04、在app.vue中进行映射数据
	<script>
        // 从vuex中按需导入mapState
        import { mapState } from 'vuex';
//export default 我对他的理解就是单纯的导出默认值，但是吧，我看视频都把他理解成 共享/暴露 ,里面的所有的都暴露出去
        export default{
          computed:mapState({
            name:state=>state.name
          })
        }
	</script>

[03] [一个计数器案例]

graph LR
A[点击按钮触发 `increment` 方法] -->B(然后继续触发mutation中的increase方法)-->C{修改state中的数据}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vuex.js"></script>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="increment()">+</button>
      <p>{{ this.$store.state.count }}</p>
    </div>
    <script>
      // 创建实例对象store
      var store = new Vuex.Store({
        state: {
          name: "vuex.js直接引用",
          count:0
        },
        // mutations,专门用来修改state中的数据
        mutations:{
            // 这个里面可以定义多个mutations方法
            increase(state){
                state.count++
            }
        }
      });
      var vm = new Vue({
        el: "#app",
        store,
        methods:{
            increment(){
                // commit专门用于触发mutation方法
                this.$store.commit('increase')
            }
        }
      });
    </script>
  </body>
</html>

# 01、为什么要在经过mutations，再去修改count的值呢，直接在 methods中修改不是更好吗？
	经过，mutation，这样可以方便地跟踪每一个状态的变化。直接修改调试工具检测不到
# 总结：
+ vuex要求比较多，你的数据就是定义在state中，想要修改就要通过mutations去修改，如果你直接去修改的话他是不建议的，也不符合他的规范，所以调试工具也是检测不到的
- 最重要的就是 调试工具检测不到

[04] [Vuex 状态管理模式]

1.单项数据流机制︰在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的。

单项数据流组成部分主要包括：

State：驱动应用的数据源
View：以声明方式将state映射到视图
Actions：响应在View上的用户输入导致的状态变化

Vuex工作流程关系：actions、mutations和state的关系
state：用于存储数据的
mutations：用来修改数据的
actions：和mutations有些类似，他是用来处理异步数据来修改数据的

[05] [actions]

actions 特性

actions类似于mutations，不同之处在于actions是异步执行的
actions函数可以接收store对象，完成mutations提交

起步

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="mut">接受mutations的参数</button>
      <button @click="act">接受acttions的参数</button>
    </div>
    <script>
      // 创建实例对象store
      var store = new Vuex.Store({
        state: {
          name: "懒羊羊",
          age: 28,
          gender: "男",
        },
        // mutations,专门用来修改state中的数据
        mutations: {
          // 这个里面可以定义多个mutations方法
          increase(state) {
            console.log(state);
          },
        },
        // 处理异步逻辑
        actions: {
          increase(context,yy) {  //context就是一个store实例对象
            console.log(context);
            console.log(yy);
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        store,
        methods: {
          // commit 触发mutations方法
          mut() {
            this.$store.commit("increase");
          },
          // dispatch触发actions方法
          act() {
            //传递参数
            this.$store.dispatch("increase",'我是actions的参数');
            //传递对象
            this.$store.dispatch({
                type:'increase',  //type就是触发actions方法的名字
                name:'我是actions的参数'
            }); 
          },
        },
      });
    </script>
  </body>
</html>

计数器

执行逻辑：

graph TD
A[点击`+`按钮] --> B(触发methods中的computer方法)
    B --> C(conputer方法内去触发actions方法)
    C -->  D[在actions中去触发mutations中的方法]
    D -->E(mutations中的方法最后再去修改count的值)
    E -->k(更新到view视图)
    F[计数器的执行逻辑]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="computer">+</button>
      <p>{{this.$store.state.count}}</p>
    </div>
    <script>
      // 创建实例对象store
      var store = new Vuex.Store({
        state: {
          count: 0,
        },
        mutations: {
          increment(state) {
            state.count++;
          },
        },
        actions: {
          increment(context) {
            // 定时器函数，1秒后执行
            setTimeout(() => {
              context.commit("increment");
            }, 1000);
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        store,
        methods: {
          computer() {
            // 去触发actions方法
            this.$store.dispatch("increment");
          },
        },
      });
    </script>
  </body>
</html>

[06] [mutations]

mutations特性

# mutations:
- mutations是一个对象，可以定义多个方法
- mutations方法用来操作state数据(翻译过来是变化，理解过来是使数据发生变化)
- mutations方法接收state对象作为参数
- 在组件中通过store.commit('mutations方法名')来触发mutations方法执行

mutations传参小实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="tt">mutations的传参</button>
      <p>{{this.$store.state.name}}</p>
    </div>
    <script>
      // 创建实例对象store
      var store = new Vuex.Store({
        state: {
          name: "",
        },
        mutations: {
          xiuGai(state, CanShu) {
            alert(1);
            state.name = "天不生我懒羊羊，万古如长夜";
            state.name = CanShu.ii
            
          },
        },
      });
      var vm = new Vue({
        el: "#app",
        store,
        methods: {
          tt() {
            // 第一种传参方式，常用
            this.$store.commit("xiuGai", "懒羊羊");
            // 第二种就是传递一个对象
            this.$store.commit({
                type:'xiuGai',
                ii:'这是对象传参的方式'
            })
          },
        },
      });
    </script>
  </body>
</html>

[07] [getters]

getters计算属性(特点)

store实例允许在store中定义getters计算属性，类似于Vue实例的computed。

起步

<!-- 天不生我懒羊羊，万古如长夜 -->
<!-- 天不生我懒羊羊，万古如长夜 -->
<!-- 天不生我懒羊羊，万古如长夜 -->
<!-- 天不生我懒羊羊，万古如长夜 -->
<!-- 天不生我懒羊羊，万古如长夜 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ this.$store.getters }}</p>
    <p>{{ this.$store.getters.test }}</p>
    <p>{{ this.$store.getters.count }}</p>
  </div>
  <script>
    // 创建一个store实例
    var store = new Vuex.Store({
      state:{
        list:[
        {id:1,name:'何端龙',gender:'男',done:true},
        {id:2,name:'王紫阳',gender:'男',done:false},
        {id:3,name:'王鹿鸣',gender:'男',done:false},
        ],
      },
      getters:{
        // test 是一个方法的名称
        // 此state是state选项，方便下文可以直接点（state.list）出来
        test:state=>{
          //filter是过滤的意思，要把list下done为true的值
          return state.list.filter(list=>list.done)
        },
        // 获取已完成的数量
        // 第一个参数必须是state，不然,下文，无法getters.test
        count:(state,getters)=>{
          return getters.test.length
        }
      }
    })
    //创建一个vm 
    var vm = new Vue({
      el:'#app',
      store
    })
  </script>
</body>
</html>
---剖析一下--- 37：
01、 return state.list;
	这个返回就是list的数组中的数据也就是 27行-29行的数据
02、return state.list.filter(list=>list.done)
	这个就是过滤掉条件的为假的数据也就是 28行-29行

小案例

效果图

<!--
 *                                                     __----~~~~~~~~~~~------___
 *                                    .  .   ~~//====......          __--~ ~~
 *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 *           '         ~-|      /|    |-~\~~       __--~~
 *                       |-~~-_/ |    |   ~\_   _-~            /\
 *                            /  \     \__   \/~   天不生我蓝羊羊 \__
 *                        _--~ _/ | .-~~____--~-/  万古如长夜!!!   ~~==.
 *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 *                                  -_     ~\      ~~---l__i__i__i--~~_/
 *                                  _-~-__   ~)  \--______________--~~
 *                                //.-~~~-~_--~- |-------~~~~~~~~
 *                                       //.-~~~--\
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *                       |                                         |
 *                       |       神兽保佑            永无BUG         |
 *                       |                                         |
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 执行逻辑：01、点击搜索按钮，触发mutations选项的search()方法，
 *          02、通过mutations选项的search()方法，修改state数据中id的值
 *          03、通过getters计算属性的search,进行过滤检索到v-model双向数据绑定的值
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>getters列表查询练习</h1>
      <input v-model="id" placeholder="请输入要检索的id" />
      <button @click="search()">搜索</button>
      <p>您输入的id是： {{ this.$store.state.id }}</p>
      <p>搜索结果: {{ this.$store.getters.search}}</p>
      <ul>
        <li v-for="item in this.$store.state.list">{{item}}</li>
      </ul>
      
    </div>
    <script>
      // ---
      var store = new Vuex.Store({
        state: {
          list: [
            { id: 1, name: "何端龙", gender: "男", done: true },
            { id: 2, name: "王紫阳", gender: "男", done: false },
            { id: 3, name: "王鹿鸣", gender: "男", done: false },
          ],
          id:999
        },
        mutations:{
            searchM(state,id){
                state.id = id
            }
        },
        getters: {
          search: (state) => {
            return state.list.filter(list => state.id == list.id);
          },
        },
      });
      new Vue({
        el: "#app",
        date: { id: "" },
        store,
        methods: {
          search() {
            // 触发mutatios
            this.$store.commit('searchM',this.id)
          },
        },
      });
    </script>
  </body>
</html>

[08] [modules]

modules定义

modules模块就是为了应对复杂的业务逻辑，将数据与操作数据的逻辑分开

案列

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
        // 定义modules、里面也有state选项，mutations,getters等等
      const moduleA = {
        state: { da: 'A' },
      }
      const moduleB = {
        state: { dads: 'B' },
      }
        // 十年生死两茫茫
        // 创建一个store实力
      const store = new Vuex.Store({
        // store实例对象中有一个mudules选项可以进行引入模块
        modules: {
          // 里面是多个key value的值
          // key的值 可以随便起一个名字
          // value的值 是上文中自己定义的变量名字
          a: moduleA,
          b: moduleB
        },
        // 不分开写实际上就是这样的
        state:{
          a:{
            da: 'A' 
          },
          b:{
            dads: 'B' 
          }
        }
      })
        //   创建vm实例
        var vm = new Vue({
          el: "#app",
          store,
        });
        // 打印到控制台,这里为为什么是store.state 而不是store.modules呢？？？
        // 详情请看32行-到40行
        console.log(store.state.a.da)
        console.log(store.state.b)
    </script>
  </body>
</html>

[09] [plugins]

作用：一般在项目中我们会使用plugins初始化一些数据
plugins选项：Vuex中的插件配置选项为plugins，插件本身为函数。

函数接收参数store对象作为参数。
store实例对象的subscribe函数可以用来处理mutation。
函数接收参数为mutation和state。

案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vuex.js"></script>
</head>
<body>
  <script>
    const myPlugin = store => {
      // 当store初始化后调用
      // subscribe是一个方法,而方法里面接受的是一个函数，这个函数又是一个匿名函数，
      // 它里面有2个参数，一个是mutations，一个是state，我们mutatins的type和payload打印一下
      store.subscribe( (mutation, state) => {
        // 每次mutation提交后调用，mutation格式为 {type, payload}
        // mutations.type 就是你到底触发哪一个方法，返回值是被触发的方法的名称
        // mutations.payload 就是mutations的参数信息，也就是承载的信息
        console.log(mutation.type, mutation.payload)
      })
    }
    const store = new Vuex.Store({
      mutations: {
        do (state) {
          console.log(state)
        }    
      },
      // 注册plujins插件，因为插件可以有多个所以他是一个数组
      plugins: [myPlugin]
    })
    // 直接触发一下mutations，这里是一个入口
    store.commit('do', 'plugin')
  </script>    
</body>
</html>

[10] [devtools选项]

# 作用：就是你是否让调试工具可以调试Vuex，默认值为true
# 语法格式：
	  devtools: false //这样调试工具就是不能再去调试Vuex

[11] [模块注册]

store.registerModule()：store实例对象提供了动态创建模块的接口，案例效果如下。

1、你需要一个store对象
2、然后就可以使用后store.registerModule，进行注册啦，他的第一个参数就是模块的名字，第二个就是模块的对象，在对象里也可以有我们之前说的选项，这里就是我们的state选项，里面可以定义数据
---------------
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vuex.js"></script>
</head>
<body>
  <script>
    const store = new Vuex.Store({ })
    store.registerModule('myModule', {
      state: {
        name: '我是store.registerModule()定义的模块'
      }
    })
    document.write(store.state.myModule.name)
  </script>    
</body>
</html>

[12] [状态替换]

# store.replaceState()：可以通过store.replaceState()方法实现状态替换
	replace:替换
	state：状态
	这里所讲的状态替换就是state的数据替换
+ 小总结store.replaceState(),就是用来替换老的state数据的
---
---代码部分
---
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
    <title>状态替换</title>
  </head>
  <body>
    <div id="app"><p>{{ this.$store.state.name }}</p></div>
    <script>
      // 创建一个Store实例对象
      var store = new Vuex.Store({
        state: {
          name: "周磊",
        },
      });
      store.replaceState({ name: '我是替换后的state数据' })
      // 挂载到vue实例中
      new Vue({
        store,
      }).$mount("#app");
    </script>
  </body>
</html>

英语词汇

# 01. store 仓库
# 02. mutations 用来修改state的数据
# 03. commit 用于触发mutations方法

介绍

(4条消息) Vuex的基本概念及其使用详解_sea9528的博客-CSDN博客

_@_day03

一、$插值

视频讲解

#文本

数据绑定最常见的形式就是使用 “Mustache”语法(双大括号) 的文本插值：

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

代码练习部分：
massage:{{msg}}{{b}}

#原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 [v-html](https://v2.cn.vuejs.org/v2/api/#v-html) 指令：
HBuilderX练习部分：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<P>massage:{{msg}}</P>
			<P v-html='rawHtml'></P>
		</div>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					msg: 'dada',
					rawHtml: '<span style="color: red">this is test</span>'
				}
			});
			console.log('我傻逼')
		</script>
	</body>
</html>

#Attribute(属性)

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 [v-bind](https://v2.cn.vuejs.org/v2/api/#v-bind) 指令：

hbuilderx练习代码（使用Vue.js,如何去绑定html属性）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-bind:class="color">猜猜看这是什颜色
			</p>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					color: 'red'
				}
			})
		</script>
		<style>
			.red {
				/* color: red; */
				color: blue;
				font-weight: bolder;
				font-size: 35px;
			}
		</style>
	</body>
</html>

#使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

三元运算符
- 三元运算符，也是一个常用的知识点，
- 理解：{{今天是你生日吗？如果是那么祝你生日快乐:如果不是那么同样祝你今天快乐}}
- 注意：问好前面可以是一个变量，变量的值可以是true，或false，应该是布尔类型，试用于比较运算

{{ ok ? 'YES' : 'NO' }}

HBuilderX练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
<body>
		<div id="app">
			<p>{{number + 1}}</p>
			<p>
				{{ok?'对的':'错的'}}
				<br>
				{{1===2?'对的':'错的'}}
				<br>
				{{1===1?'对的':'错的'}}
			</p>
       	<!-- ----------------------------- -->
		<!--
		 01、变量.split('')，将我的名字进行拆分，以没有任何内容的方式进行下拆分，
			理解：讲heduanlong拆分成字母，.split函数会返回一个数组，
		 02、.reverse函数将数组内的字母反向排列，
		 03、.join函数将数组内的字母结合一个字符串
		 -->
		<p>{{ message.split('')}}</p>
		<p>{{ message.split('').reverse()}}</p>
		<p>{{ message.split('').reverse().join('')}}</p>
		<!-- ----------------------------- -->
	</div>
     <script>
		let vm = new Vue({
			el: '#app',
			data: {
				number: 12,
				ok: false,
				message: 'heduanlong'
			}
		});
	</script>
</body>

二、$指令

观看本节视频讲解

#修饰符

修饰符是用.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
HBuilderX练习部分

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if='seen'>你能看得到我吗?</p>
			<a v-bind:href='url'>徽商职业学院</a>
			<!-- 使用@cilick指令，可以为某一个元素,绑定对应的事件 -->
			<!-- .stop就是vue.js中的修饰符 ,子级函数，不会影响到父级
				这里给click2添加修饰符，那么click1的方法就不会执行
				理解：当前的click事件，一旦执行完毕，就会停下来
			-->
			<div @click='click1'>
				<div @click.stop='click2'>
					<button>click me</button>
				</div>
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					seen: true,
					seen: false,
					url: 'http://old.hsxy.edu.cn/'
				},
				methods: {
					click1: function() {
						console.log('click1......')
					},
					click2: function() {
						console.log('click2.....')
					}
				}
			});
		</script>
	</body>
</html>

三、$Class 与 Style 动态去绑定

观看本节视频讲解

HBuilderX练习部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修饰符</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="test" v-bind:class='{a: isa,green:isgreen}'
				style="width: 200px; height:200px;text-align: center;line-height: 200px;">
				hi vue
			</div>
			<!-- ------------------------------------------------- -->
			<!-- 分割线 -->
			<!-- 静态的绑定多个 -->
			<div v-bind:class='["da","db"]'>
				我是傻逼
			</div>
			<!-- ------------------------------------------------- -->
			<!-- 分割线 -->
			<!-- 内联样式绑定 -->
			<div :style="{color:color,background: ok?'red':'green'}">
				你是傻逼
			</div>
		</div>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					isa: true,
					isgreen: true,
					color: 'darkred',
					ok: false
				}
			});
		</script>
		<style>
			.test {
				font-size: 30px;
				color: white;
				color: black;
			}
			.a {
				background-color: red;
			}
			.green {
				color: green;
			}
			.da {
				color: red;
			}
			.db {
				color: yellow;
			}
		</style>
	</body>
</html>

四、$条件渲染

HBuilderX练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="text==='A'">A</h1>
			<h1 v-if="text==='B'">B</h1>
			<h1 v-if="text==='c'">C</h1>
			<h1 v-else>你是大傻逼啊</h1>
			<!-- -------------------------- -->
			<!-- 分割线 -->
			<!-- v-show,设置该属性是否要显示 -->
			<h1 v-show="ok">v-show</h1>
			<h1 v-show="okk">v-show</h1>
			<!-- -------------------------- -->
			<!-- 分割线 -->
			<!-- 好像确实有异曲同工之妙，算了这个就先舍弃吧,刚刚去开发者视图看了一下，好像都看不到，趋势不行 -->
			<h1 v-if="seen">v-if</h1>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					text: 'A',
					text: 'B',
					text: 'da',
					ok: 1,
					okk: 0,
					seen: false
				}
			})
		</script>
	</body>
</html>

五、$列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
HBuilderX练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- ------------------ -->
			<!-- 1 -->
			<ul id="example-1">
				<li v-for="item,index in items">
					{{index}} {{ item.message }}
				</li>
			</ul>
			<!-- ------------------ -->
			<!-- 2 -->
			<ul>
				<li v-for="item,key in o">
					{{key}}：{{ item }}
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					// 1
					items: [{
							message: 'da'
						},
						{
							message: 'da1'
						}, {
							message: 'da2'
						},
					],
					// 2
					o: {
						test: '1',
						test1: '3',
						test2: '1',
					}
				}
			})
		</script>
	</body>
</html>

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：
修改部分
理解：加上不容易出错，就先这样吧

<ul id="example-1">
			<li v-for="item,index in items" v-bind:key='index'>
				{{index}} {{ item.message }}
			</li>
		</ul>
		<!-- ------------------ -->
		<!-- 2 -->
		<ul>
			<li v-for="item,key in o" :key="key">
				{{key}}：{{ item }}
			</li>
		</ul>

Element -Ui

官网：Element - 网站快速成型工具
入门使用：Element-ui的使用_vegetable-WEN的博客-CSDN博客_使用elementui

01. Element -Ui 基本介绍

1-1：定义

element ui就是基于vue的一个ui框架，该框架基于vue开发了很多相关组件，方便我们快速开发页面。

1-1：由来

饿了么前端团队基于vue进行开发，并且进行了开源，element ui中提供全部都是封装好组件。

02. npm 安装

# 01. 下载element-ui依赖
	npm i element-ui -S
# 02. 指定当前项目使用element-ui
   	在main.js进行使用（完整引入）
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        // 在vue脚手架中使用element-ui
        Vue.use(ElementUI)

2021Web前端开发赛项大赛设备试题

任务八在 PC 商城首页实现商品分类和分类列表展示功能

主要的任务：

显示分类信息
点击二级分类完成跳转
完成价格排序

任务描述： 在 PC 商城首页显示商品分类信息，包括二级分类。点击二级分类可跳转至商品列表页面。商品列表页面需分页显示，并可按价格排序。

3-8 商品分类信息

3-9 商品列表显示

要求：
1．首页显示商品分类信息，需要实现树形结构展示分类信息如图 3-8 所示。
2．点击商品二级分类，跳转至商品列表页面如图 3-9 所示。商品列表页面中每行显示 4 个商品，1 页显示 8 个商品，每个商品显示商品名称、商品价格信息。
3．商品列表页面点击“价格”可以按照价格对商品进行排序
提交作品：保存完成的页面。
分值：本任务共 10 分。
其他：【API 接口参考】

接口名称	API
获取商品分类 API	http://localhost:8008/api/category
获取商品列表 API	http://localhost:8008/api/products

01、知识储备login...

02、题目分析

~~显示分类信息~~

结构梳理：
	ul
		li v-for 外层循环
			a 一级标题
			p 
				a 二级标题 v-for 内层循环
---

点击二级分类完成跳转

# 逻辑梳理
# 01、点击二级分类，会触发一个点击事件，（点击事件执行后，通过编程式路由导航 然后进行跳转界面，并传递一个参数，这个参数是一个对象，所以不可以直接的去传递，因为数据在传输的过程中只能是字符串，所以需要通过 JSON.strify(一个实参) 转换成字符串）
# 02、现在已经跳到 `分类界面啦` ， 第一件要做的是啥呢？en... first、这个时候需要在 `生命周期函数（mounted）里面`把传递过来的，字符串也在给他转化成 ·对象· 转化函数是JSON.parse(this.$route.query.传递过来的参数)，并用一个变量接收一下下,two、 然后把二级分类的顶部条目，给他给赋一下值，three、然后为了可以准确的跳到对应的二级分类界面，需要用一个变量接收一个id（当你点击二级分类，传递过来的id）嗯，完美.!，最后编写具体的实现方法
# 03、你现在已经来到了具体的 ` 获取分类产品的具体方法内 `

完成价格排序

03、功能编写

92：获取uil

vue-vant组件库

一、创建项目

命令行
vue create vue-vant-project
    Manually select features
        Babel 空格键选择或取消选择

二、导入vant

官网：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)
安装：npm i vant_@_latest-v2 -S
全部导入main.js

// 导入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

问题汇总：

~~为什么一开始运行好好的，自己随便点了看看，他就直接报错了?~~（已升级为第三题）
~~我在安装sass时，一直出错~~
~~编辑器经常会自动重排代码格式，他只要重排，我的代码，就会出错，有没有好的方法去解决这个问题？~~
循环的值进行换行，理论上应该是不会影响页面效果的吧，，，
~~怎样快速找到自己想要找到的界面，一个一个去翻，虽然也能找到，但是对我来讲会浪费大把时间~~

vue

第 1 章：vue基础知识和原理

[知识点01] [Vue所管理的函数]

# 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
- 目前已知的vue管理函数
		01、methods  配置选项中的
		02、computed 配置选项中的
		03、watch 		配置选项中的

[01] [vue是什么？]

# 一套用于**构建用户界面**的**渐进式**JavaScript框架
	构建用户界面：就是你把数据给vue，vue帮你构建用户界面
	渐进式：自底向上逐层应用
		简单应用：你可以引入自己需要的库或者插件
		复杂应用：引入各式各样的vue插件
		渐进就是从简单应用到复杂应用

[02] [搭建vue开发环境]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        引入vue
        当你引入vue时，全局就多了一个 `Vue` 的构造函数
            验证方法：在浏览器的控制台输入 `Vue` 回车
     -->
    <script src="../js/[01] [vue] 开发版本.js"></script>
</head>
<body>
</body>
</html>

其他

(2条消息) Vue.config.productionTip = false_马优晨的博客-CSDN博客
1. 在代码的399行

[03] [小案例，起步]

# 前提：当我引入 `Vue` 时，全局就多了一个 `Vue` 的构造函数
- 既然是构造函数，肯定要new一个去调用
	var vm = new Vue()
	new Vue这里面要传进一个参数，并且参数的类型是一个对象，我们管这种对象叫配置对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识Vue：
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.root容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'
						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->
		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>
		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'atguigu',
					address:'北京'
				}
			})
		</script>
	</body>
</html>

[04] [vue模板语法]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue模板语法有2大类：
					1.插值语法：
							功能：用于解析标签体内容。
							写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<!-- .toUpperCase(),将字符串中的小写字符全部转换成大写 -->
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

[05] [el与data的两种写法] 09

# 1. el有2种写法
    (1).new Vue时候配置el属性。
    (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
# 2. data有2种写法
      (1).对象式
      (2).函数式
    如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
# 3. 一个重要的原则：
    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

[06] [mvvm模型] 10

MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>理解MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<!-- <h1>测试一下1：{{1+1}}</h1>
			<h1>测试一下2：{{$options}}</h1>
			<h1>测试一下3：{{$emit}}</h1>
			<h1>测试一下4：{{_c}}</h1> -->
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'北京',
			}
		})
		console.log(vm)
	</script>
</html>

[07] [数据代理]

[08] [计算属性]

# 01、你想理解好计算属性，就得先整明白什么东西叫属性？
	💢对于Vue来说，他认为你data中配置项你所写的东西就是`属性`,key是属性名，value是属性值
# 02、计算属性定义
	💢所谓的计算属性就是拿着你已经写完的属性，去加工、去计算，然后生成一个全新的属性，这就是·计算属性·
		💢例子：data配置项，有姓、有名，那你说，我是不是可以完全可以给他计算出来一个东西，叫 fullname   那么 firstName，lastName 我们称之为属性，而 fullname 我们就称之为计算出来的属性。简称 计算属性
		💢注意的事项：在vue当中呢，他是把属性和计算属性分开放，所以不能像12行那样直接写在data配置项当中，data里面放的是属性，如果你想弄那个计算属性，你得需要一个配置项，你直接写在data配置项里面，肯定是不可以的
			 data: {
           firstName:'张'
           lastName:'三'
         	 🤪~~fullname：？？？~~
       },
# 03、计算属性的起步
	💢前情提要：它配置的方法和data类似，你也得写成一个对象的形式，因为你想啊，data里的属性是很多很多的，那我计算属性以后肯定也是很多的，所以得写一个对象。所以接下来的第一步：就给你计算属性起一个名字吧~ date中有姓，有名，那么这个计算属性就叫 fullname 吧
	💢注意事项：不可以像19行那样直接写成字符串，计算属性，计算属性，他有可能比较复杂，所以vue要求你，把整个计算的过程，配置成一个对象,对象里面要写一个get(){}
	computed:{
	  🤪~~fullname：‘张-三’~~
	  //这里的fullname也在vm的实例对象之上
	  fullname:{
	  	//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
	  	get(){
	  		// 25:1 这里不能直接去写，因为他访问不到vue实例对象，vue已经把get函数里的this调成了vm实例对象，所以...
	  		🤪~~return firstName+'-'lastName~~
	  		return this.firstName+'-'+this.lastName
	  	}
	  }
	}
	💢特性特点：get什么时候去调用，当有重复调用的时候，他有一个缓存机制，重复调用的会走缓存，他就不会找get函数要了
	//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
# 04、computed vs methods
	💢我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
	💢可以说使用 computed 性能会更好，有缓存机制,可以复用，效率更高，调试方便，可以通过调试工具实时观测的到
# 05、set
	💢computed 属性默认只有 get ，不过在需要时你也可以提供一个 set ：
	💢get是拿到数据，如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
	💢set什么时候调用? 当fullName被修改时。
# 06、总结
	💢在data配置项中，你写vm身上就有啥，methods也是一样,但是计算属性不一样，他在往vm身上放的时候,他会自动调用get，拿到get的返回值，然后放在vm身上，然后放的名字是 fullname
	💢get&set不能写成箭头函数
	💢凡是vue所管管理的函数都不要写成箭头函数  
	💢计算属性最终会出现在vm上，直接读取使用即可。
    在vue模板中：
      错误写法：
        firstName()
      正确写法：
        firstName
# 07、计算属性的简写形式
	💢计算属性多数情况下只读取出来展示，所以不需要set， 注意一旦你确认了，你的数据只考虑读取，不考虑修改，才可以使用简写
	💢computed 属性默认就有 get，所以我们可以把他写成函数的形式
		//:function(){} 这个就充当get使用
				fullName:function(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
	💢就上方的函数可以再进行升级进化一下
		//最终形式：
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
---
# 其他：
- firstName：姓氏
- lastName：名字
- fullname：全名
- computed：计算属性，计算，估算过得 || 本身就有计算的意思

[09] [监视属性]

[？？] [ key的原理 ]

# 面试题：react、vue中的key有什么作用？（key的内部原理）
# 1. 虚拟DOM中key的作用：
	key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
	随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
---
# 2. 对比规则：
	(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
			①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
			②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
	(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
			创建新的真实DOM，随后渲染到到页面。
												
# 3. 用index作为key可能会引发的问题：
		1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
			 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
		2. 如果结构中还包含输入类的DOM：
				会产生错误DOM更新 ==> 界面有问题。
# 4. 开发中如何选择key?:
		1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
		2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
			使用index作为key是没有问题的。

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key的原理</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表（遍历数组）</h2>
        <!-- .once代表这个按钮只能执行一次 -->
        <button @click.once="add()">添加一个老刘</button>
        <ul>
            <!-- 
                key就是节点一个标识，相当于人类社会的身份证号
                使用index有问题
                    01:如果你在（真实dom中），对数据进行了破坏顺序的操作
                如果你在写v-for遍历列表的时候，你没有写这个key，
                那么vue会做一个默认的动作，就是把遍历时的索引值，自动
                就作为 key 了，，，说白就是，如果你没有写key，vue就会
                帮你补一个key，这个key就是index 
             -->
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                persons: [
                    { id: '001', name: '张三', age: 17 },
                    { id: '002', name: '李四', age: 18 },
                    { id: '003', name: '王五', age: 19 }
                ]
            },
            methods:{
                add(){
                    let p={ id: '004', name: '周磊', age: 16 }
                    this.persons.unshift(p)
                }
            }
        })
    </script>
</body>
</html>

第 2 章：Vue组件化编程]

第 3 章：使用 Vue 脚手架

3.1 初始化脚手架

3.1.1 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
最新的版本是 4.x。
官方文档: https://cli.vuejs.org/zh/。

3.1.2 vue cli 安装相关

01、安装
	npm install -g @vue/cli
	
02、输出版本号
	vue --version
	vue -V
03、升级
	npm update -g @vue/cli
04、卸载
	i === install
	npm uninstall -g @vue/cli
	
05、显示命令的帮助
	vue --help
	vue -h
	
06、创建一个由vue-cli服务支持的新项目
	vue create newproject
	
		Please pick a preset 请选一个预置：
		> Default ([Vue 3] babel, eslint) 默认预设配置Vue 3 项目
  		Default ([Vue 2] babel, eslint) 默认预设配置Vue 2 项目
 		  Manually select features  手动选择特性
 		  
 		  	Check the features needed for your project: 检查项目所需的功能：
 		  	>(*) Babel 兼容低版本浏览器
         ( ) TypeScript
         ( ) Progressive Web App (PWA) Support
         ( ) Router 单页面网页应用程序的路径管理系统
         ( ) Vuex   状态管理插件，可以方便组件之间的数据共享
         ( ) CSS Pre-processors CSS 预处理器（支持sass语法），样式可以进行嵌套
         (*) Linter / Formatter ESlint语法，帮你检查您的代码规范，非常的严格，没有空格都会报错
         ( ) Unit Testing
         ( ) E2E Testing
         
         	? Use history mode for router? 路由器是否使用历史模式？
         	? Pick a CSS pre-processor 选择CSS预处理器
         		> Sass/SCSS (with dart-sass) 选择第一个
  						Less
  						Stylus
  				? Where do you prefer placing config for Babel, ESLint, etc.? 您要在哪里放置Babel、ESLint等配置. ？
  					> In dedicated config files 在专用配置文件中
  						In package.json           在package.json中
  				? Save this as a preset for future projects? (y/N) 是否将其保存为未来项目的预设？
07、动并打开vue-cli用户界面
	vue ui

(3条消息) vue/cli删除预设记录_gaozheng_liang的博客-CSDN博客

3.1.3 Vue Route相关

# 01. `@` 就代表 src路径为起始点

01、安装（手动添加）
	cnpm install vue-router
	cnpm i vue-router@3.5.2 -S（安装指定版本的路由）
02、添加一个路由到新项目（自动添加）
	vue add router

注意事项
	vue的2版本，不兼容VueRouter4.x 如果你的项目版本是vue2.x 那么安装路由的时候，需要去指定路由的版本

3.1.4 node.js相关

# 01、查看node.js的版本
	npm -v
# 02、安装淘宝镜像
	npm install -g cnpm --registry=https://registry.npm.taobao.org
# 03、安装依赖
	npm install === npm i
# 04、运行程序
	npm run dev 运行程序（**是vue-cli2.X版本使用的**）
	npm run serve 运行程序（**是vue-cli3.X版本使用的**）

第五章：vuex

总结

# p105~p116
## 01、vueX的简介 p105
## 02、求和小案例_纯vue版 p106
## 03、vueX的工作原理图 p107
## 04、搭建vueX环境

p107

# 01 dispatcg,commit, 都是一个函数，（参数1，参数2）参数1是一个动作类型，参数2是完成动作类型需要的值
# 02 actions,mutations,state 数据类型都是一个 对象{}
# 03 actions,mutations,state 他们的领导者是 store
# 04 dispatch和commit 这2个函数都是 store 所提供支持的
# 05 所有的vc组件实例对象身上，都必须可以看到 store

p108

[点击我](###5.2 实践vuex)
vue在执行的时候，会先执行import语句，然后再执行其他语句，这个与你写的顺序无关

5.1 理解vuex

5.1.1 vuex是什么

概念：vuex就是vue框架的状态（数据）管理插件
vuex就是vue框架集中式状态（数据）管的Vue插件，对Vue中多个组件的共享状态的进行集中式的（读和写）

5.1.2 什么时候使用Vuex

多个组件需要共享数据时

5.1.3 案例

# 1：知识储备 
## 2：取余在线计算器 https://tool.520101.com/calculator/yushu/
### 3：什么是余数:
	余数指的是整数除法中 被除数 未被除尽部分，比如说7÷3=2 ......1，其中1为余数；
### 3：在编程当中，什么时候会用到取余
	if()判断的时候
# 1：总结
	偶数 % 2 = 0 = false
	奇数 % 2 = 1 = true

具体代码可以参考：106_尚硅谷Vue技术_求和案例_纯vue版_哔哩哔哩_bilibili

5.1.4 Vuex工作原理图

5.2 实践vuex

5.2.1 搭建vuex环境

注意：
在2022年2月7日,vue3成为了默认版本,也就是说，npm i vue ，安装的直接就是vue3了，并且vue3成为默认版本的同时,vuex也更新到了4版本，也就是说我们现在如果执行npm i vuex，安装的就是vuex4版本，而vuex的4版本，只能在vue3中使用的，如果我们需要在vue2的项目中，去安装vuex4版本就会报错
梳理：
vue2项目中，只能使用vuex3版本中
vue3项目中，只能使用vuex4版本

安装：

npm install vuex@3.x

创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......
//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

5.2.2 基本使用

初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}
const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}
//初始化数据
const state = {
   sum:0
}
//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

组件中读取vuex中的数据：$store.state.sum
组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.2.3 getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
在store.js中追加getters配置

......
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}
//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

组件中读取数据：$store.getters.bigSum

快速检索部分

阅读过的文章

其他

创建一个vue项目必须要做的准备

# 02、在 vue.config.js 文件下，加入以下代码
	lintOnSave: false  //忽略组件的命名格式必须为`multi-word`(多个单词组成)
# 03、在 .eslintrc.js 中加入一行代码：
	"no-tabs":"off" //忽略eslint检查规范代码
	"indent": 'off' //关闭eslint缩进检查
    'space-before-function-paren':0 //忽略函数前必须加一个空格而导致的eslint语法报错
    "no-irregular-whitespace":"off" //这禁止掉 空格报错检查
    ------
# VsCode（相关）
# 01、在项目的根目录下创建一个新的文件 .prettierrc （规范格式化文档的准则） 
	{
    "semi": false,         //每一句代码后面不加分号
    "singleQuote": true	   //以单引号引起我们的字符串
	}

常见的问题解决办法

忽略eslint语法效验：Use /_ eslint-disable _/ to ignore all warnings in a file. 报错 - CatherLee - 博客园 (cnblogs.com)

解决`eslin`一劳永逸的方法

# 2022年11月20日18:57:50 
pc端这么搞，整个项目就直接坏掉了
# 首先：在当前的项目中执行
	npm uninstall eslint --save
# 然后：然后后进入package.json中，删除残留信息。 否则在执行卸载后，运行会报错。 之后再起项目

axios

# 01 什么是接口文档？
	在真正工作的时候，发什么请求，得到什么数据，用什么方式发，带什么参数，返回值是什么，是不是得有一个说明的文档，这就叫**接口文档**

posted @ 2023-07-16 01:04 he_duanlong 阅读(83) 评论(0) 收藏举报

刷新页面返回顶部

test01

test00

README

我的错题本

01、不能在main.js中乱敲打回车

02、vue is not defind

03、Trailing spaces not allowed

04、在开发vue项目是，hbuilderX 和 Vs code自动重排代码格式导致语法不兼容报错问题的解决办法

一、hbuilder解决办法

二、vs code解决办法

05、组件名称命名不规范

06、vue项目报错：Unexpected tab character (no-tabs)

07、 Expected indentation of 2 spaces but found 1 tab

_@_day01

00、如何查看本机IP地址

01、方向目标

电商PC端平台

平台主要功能如下

02、Vue

1、Vue.js 介绍

2、Vue.js 安装

安装淘宝镜像

3、Vue.js 目录结构

4、Vue.js 起步

语法格式：

实例1：

实例2：

实例3：

5、Vue.js 模板语法

$插值

#文本

#Html

#属性

实例1

实例2

拓展

#使用 JavaScript 表达式

$指令

$参数

$修饰符

$过滤器

$v-on(指令)

语法格式

$v-mode(指令)

$缩写

#v-bind 缩写

#v-on 缩写

6、条件语句

v-if

v-else 指令

v-else-if

v-show

7、循环语句

一个小实例

v-for 迭代对象

v-for 迭代整数

8、计算属性

语法格式

实例 1

实例 2 （getter）

实例 3（getter setter）

9、监听属性 $watch

语法格式

实例 1

实例 2

innerHTML与innerText区别

10、样式绑定

11、Vue.js 事件处理器

12、Vue.js 表单

参考：

实例 1（输入框）

实例 2（复选框）

实例 3（单选按钮）

13、Vue.js 组件

组件介绍

组件命名

语法格式

实例 1

延续上面的组件案例为它定义一个属性

为它再添加一个其他的元素

One. 通过`<script>`标签的src属性引入。