学学vue-1

本文主要是介绍学学vue-1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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/

这篇关于学学vue-1的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

学学vue-1

vue

0 安装

1 基础

1.1 创建一个简单vue实例

1.2 创建vue实例初始化渲染

1.3 插值表达式 {{}}

1.4 Vue响应式特性

1.5 开发者工具

1.6 Vue指令

1.x 错误汇总

div元素标签配置错误导致vue元素显示失败

开发者工具安装在edge上的时候不显示安装插件

在使用@click组件过程中调用methods函数过程失效

参考文献

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

前端原生js实现拖拽排课效果实例

CSS弹性布局常用设置方式

CSS3中使用flex和grid实现等高元素布局的示例代码

css渐变色背景|＜gradient示例详解

CSS自定义浏览器滚动条样式完整代码

css实现图片旋转功能

vue基于ElementUI动态设置表格高度的3种方法

Vue项目中Element UI组件未注册的问题原因及解决方法

详解如何在React中执行条件渲染

学学vue-1

vue

0 安装

1 基础

1.1 创建一个简单vue实例

1.2 创建vue实例 初始化渲染

1.3 插值表达式 {{}}

1.4 Vue响应式特性

1.5 开发者工具

1.6 Vue指令

1.x 错误汇总

div元素标签配置错误导致vue元素显示失败

开发者工具安装在edge上的时候不显示安装插件

在使用@click组件过程中调用methods函数过程失效

参考文献

相关文章

1.2 创建vue实例初始化渲染