学学vue-1

最新推荐文章于 2024-09-07 14:44:02 发布

别下那么会看场合的雨啊

最新推荐文章于 2024-09-07 14:44:02 发布

阅读量1.6k

点赞数 15

分类专栏： vue学习笔记记录文章标签： vue.js html5 css chrome css3

本文链接：https://blog.csdn.net/m0_51765675/article/details/141882670

版权

vue学习笔记记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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/

别下那么会看场合的雨啊

关注

15
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

学学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实例初始化渲染