vue
0 安装
-
装
node.js，以及cnpm（npm超时或者被屏蔽，安装cnpm国内镜像）查看安装版本（是否安装成功） node -v 安装成功之后也会安装npm npm -v cnpm镜像 npm install -g cnpm --registry=http://registry.npm.taobao.org -
在vscode中装vue-offical扩展，点击install之后浏览器跳转到vscode
-
注：需要vscode，试验创建文件是
.html后缀
1 基础
1.1 创建一个简单vue实例
vscode编辑一个.html文件，然后!+Tab补全
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
1.2 创建vue实例 初始化渲染
-
1，准备容器：div+容器
-
2，引包：官网引包(生产和开发版本有区别)（vue2（停止维护）v3（默认））
-
测试的需要警告的是否使用开发版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -
最终上线不需要警告等使用生产的版本上线
-
-
3，创建实例：
new Vue() -
4。添加配置项 => 完成渲染：
- el：指定挂载节点，选择器指定控制那个盒子
- data：给指定的盒子提供数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 创建vue实例 初始化渲染1，准备容器2，引包3，创建实例4。添加配置项 => 完成渲染 -->
<div class="box2"></div>
<div class="box"></div><div id="app">
<!-- 用于编写未来的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 引入开发版本的包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 一旦引入vuejs核心包，在全局环境就有了vue构造函数const app = new Vue({//通过el配置选择器，指定vue是哪个盒子el: '#app',//通过data提供渲染的数据data: {msg: 'hello 测试数据',count: 200}})
</script></body>
</html>
1.3 插值表达式 {{}}
插值表达式是Vue的一种模板语法
作用：利用表达式进行插值，表达式可以是求值代码js引擎会将其计算出结果
语法：{{ 表达式 }}
注意：使用的数据必须存在、支持表达式不能使用判断关键字、不能在属性中使用插值
<div class="box"><p>{{ name }}</p><p>{{ name.toUpperCase() }}</p><p>{{ name + 'hello'}}</p><p>{{ age >= 18 ? 'y' : 'n'}}</p></div><script>const box = new Vue({el: '#box',data: {name: 'tony',age: 18}})</script>
1.4 Vue响应式特性
什么是响应式？？
- 响应式：数据修改，视图自动更新（F12控制台可以直接修改，视图可以直接变化，以后可以通过信号例如，按钮、提交表单等进行修改数据，但是底层原理就是相同的）
数据—>修改数据—>vue监听到数据修改—>自动更新视图/Dom操作—>视图界面
聚焦于数据—>数据驱动视图，使用Vue开发只关注业务核心逻辑，根据业务修改数据即可
如何修改或者访问数据？？？
data数据最终会被添加到实例上
- 访问数据：“实例.属性名”
- 修改数据：“实例.属性名” = “值”
1.5 开发者工具
chrome的工具Vue.js Devtools_6.6.3_Chrome插件下载_极简插件 (zzzmh.cn)。下载之后在浏览器插件中打开开发者模式，然后拖拽进去这个插件，然后在插件详情中打开允许访问浏览器地址（在edge中安装叫做允许访问URL）然后就设置好了在启动vue程序之后f12查看网页元素最后可以看到一个vue的选项卡，经常使用可以放到前面。
Root：代表当前渲染的根实例（可以通过下列的数据修改直接更新数据，视图会实时更新）
<div id="box2">{{msg}}
</div>
<script>const box2 = new Vue({el: '#box2',data: {msg: 'hello world',count: 100}})
</script>
1.6 Vue指令
Vue指令会根据不同的指令，针对标签实现不同的功能，指令带有v-前缀的特殊标签属性
| vue指令 | 标签属性 | 解释 |
|---|---|---|
| v-html | 动态解析标签 | 将div不识别的标签置入网页当中变成网页标签 |
| v-show | 控制元素显示隐藏(频繁切换使用) | v-show=‘'表达式‘’，true显示，false隐藏 |
| v-if | 控制元素显示隐藏(条件渲染使用) | 与show不同，show可以在网页元素看到，if满足条件才渲染其余情况不显示 |
| v-else | 控制元素显示隐藏 | 和v-if相反，同时v-if/v-else显示一个 |
| v-else-if | 条件判断语句 | 和v-if/v-else一起组成switch case语句 |
| v-on | 注册事件=监听条件+提供处理逻辑 | 简写@事件名，事件触按照设置的处理方式处理 |
| v-bind | 动态设置html的标签属性 | src、url、title等，简写:属性名，(插值表达式是不允许写在标签中的) |
| v-for | 基于数据进行循环，多次渲染元素 | 便利数组、对象、数字v-for=“(item, index) in array” |
| v-for的 :key给元素添加唯一标识 | 默认原地修改元素，修改了元素的标签元素前移，盒子不变添加后key后会全删 | |
| v-model | 给表单元素使用，双向数据绑定 | v-model = ‘变量’，在输入框和f12修改都会影响数据，快速设置表单元素内容 |
| vue是数据驱动的数据变化，视图自动更新v-model实现视图变化数据自动更新 |
<div id="box3"><div v-html="msg"></div>
</div>
<script>const box3 = new Vue({el: '#box3',data: {msg: '<a href="https://baidu.com">测试网页链接(百度)</a>'}})
</script>
<style></style>
<div id="app"><div class="box">v-show控制的盒子</div><div class="box">v-if控制的盒子</div>
</div><script>const app = new Vue({el: '#app',data: {flag: false}})
</script>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><style>.box {margin: auto;width: 50%;border: 3px solid green;padding: 10px;text-align: center;}.btn {width: 67%;border: 3px solid yellowgreen;padding: 16px;text-align: center;}</style><div id="app"><div v-show='flag' class="box">v-show控制的盒子</div><div v-if='flag' class="box">v-if控制的盒子</div><div v-else class="box">v-else控制的盒子</div><button v-on:click="doThis" class="btn">btn</button></div><script>const app = new Vue({el: '#app',data: {flag: false}})</script></body>
v-on
</style><div id="app"><div class="box"><button @click="fn">控制显示隐藏</button><h3 v-show="flag">自动贩卖机</h3><button @click="qs">汽水5元</button><button @click="buy(8)">桃子</button><button @click="cfe">coffee10元</button></div><p>剩余钱数：{{ money }}元</p><button @click="sub()">-</button><span>{{money}}</span><button @click="money++">+</button></div><script>const app = new Vue({el: '#app',data: {money: 100,money2: 200,flag: true},methods: {fn(){this.flag = !this.flag},qs(){app.money -= 5},cfe(){this.money -= 10},buy(price){// console.log(price)this.money -= price},sub(){this.money--}}})</script>
v-for
<ul><li v-for="(item, index) in list">{{ item }} - {{ index }}</li><li v-for="item in list">{{ item }}</li>
</ul>
<script>data: {money: 100,money2: 200,flag: true,list: ['汽水5块', '桃子8块', 'coffee10块']}
</script>
注意项
- v-for中的:key只能是数字或者字符串类型，需要具有唯一性。推荐使用id作为key不推荐使用index，因为index 是会变化的
v-model：
<div id="app">账户：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login()">登录</button><button @click="reset()">重置</button>
</div>
联系测试部分的完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><style>.box {width: 50%;border: 3px solid green;padding: 10px;text-align: center;}.btn {margin: auto;width: 67%;border: 3px solid yellowgreen;padding: 16px;text-align: center;}</style><div id="app">账户：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button @click="login()">登录</button><button @click="reset()">重置</button><div class="box"><button @click="fn()">控制显示隐藏</button><h3 v-show="flag">自动贩卖机</h3><button @click="qs()">汽水</button><button @click="buy(8)">桃子</button><button @click="cfe()">coffee</button><ul><li v-for="(item, index) in list">{{ item }} - {{ index }}</li><li v-for="(item, index) in booklist" :key="item.id"><span>书名：{{ item.name }}</span><span>书作者：{{ item.author }}</span><button @click="del(item.id)">delete</button><button @click="buy(20)">买了</button></li></ul></div><p>剩余钱数：{{ money }}元</p><button @click="sub()">-</button><span>{{ money }}</span><button @click="money++">+</button></div><script>const app = new Vue({el: '#app',data: {username: '',password: '',money: 100,money2: 200,flag: true,list: ['汽水5块', '桃子8块', 'coffee10块'],booklist: [{id: 1, name: '《红楼梦》', author: '曹雪芹'},{id: 2, name: '《西游记》', author: '吴承恩'},{id: 3, name: '《水浒传》', author: '施耐庵'},{id: 4, name: '《三国演义》', author: '罗贯中'}]},methods: {fn(){this.flag = !this.flag},qs(){app.money -= 5},cfe(){this.money -= 10},buy(price){// console.log(price)this.money -= price},sub(){this.money--},del(id){console.log('删除', id)this.booklist = this.booklist.filter(item => item.id !== id)},login(){console.log(this.username, this.password)},reset(){this.username = ''this.password = ''}}})</script></body>
</html>
运行效果：
1.x 错误汇总
div元素标签配置错误导致vue元素显示失败
<div id="box"> <!-- js --> <div class="box"> <!-- css -->
开发者工具安装在edge上的时候不显示安装插件
插件需要安装在程序启动都的浏览器上，普通的使用浏览器和程序启动的浏览器似乎插件隔离。至少实验下来edge是这样的，插件应该是chrome的毕竟网址是chrome的，暂不了解chrome是否会出现这个问题。
可以将程序启动之后复制本地连接到解压过插件的浏览器浏览，就可以正常使用插件，程序打开的浏览器，有可能没有插件，每次在这个地方安装以后可能还需要安装
在使用@click组件过程中调用methods函数过程失效
如果失效首先看看是不是有函数名称等写错了，出现错误：methods写成method，这么写在数据元素中不会报错，但是在实际运行的过程中会导致函数失灵
如果确定没有出现错误，就可以参考网上的原生组件部分的内容，例如在click后面加上.native，变成原生组件可能会好使
参考文献
vue2官方文档：https://v2.cn.vuejs.org/v2/api
黑马程序员vue教程：https://www.bilibili.com/video/BV1HV4y1a7n4/
