vue初学笔记

最新推荐文章于 2024-08-29 14:26:44 发布

帅兰

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量211

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/msmso/article/details/111185360

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、引入
二、vue介绍与安装
- 1. 介绍
- 2. 安装
三、使用

一、引入

前端目前形势

用HTML，CSS，JS写出模板页面，给后端用模板语言嵌入渲染再返回到前端浏览器做显示。
部分地方使用Ajax技术前端向后端发送异步调用实现局部刷新的项目(render+ajax)。
单页面只用ajax实现加载数据，dom渲染页面的项目(前后端分离雏形)。
使用agular它是一个js的框架，使前段工程化，前段也是一个工程一个项目。
react，vue，当下最火的两个框架，国人vue用的多，vue是由国人开发的。
大前端：移动开发（ios,安卓），web（web,微信小程序，支付宝小程序），桌面应用开发（Windows桌面）。
谷歌flutter开发（安卓，ios，桌面），实现前段一套代码到多个平台都可执行。
使用vue框架开发的nui-app，可实现一套代码到编十个平台。
最后九九归一》》》内卷化。

2020/12/14

二、vue介绍与安装

1. 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，其是个基于MVVM理念设计的框架。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Model-View-ViewModel：

-model：数据（后端给的，js接收到）

-ViewModel：中转（双向数据绑定：js中变量变了，html中数据也跟着变）

-view：视图（html+css）

2. 安装

创建一个.html 文件然后通过如下方式引入Vue:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、使用

1. 声明式渲染

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
    <p>{{name}}</p>
    <p>{{age}}</p>
    <p>{{hobbies}}</p>
    <p>{{info}}</p>

    <!--  运算  -->
    <p>{{10+10}}</p>

    <!--  三元式  -->
    <p>{{10<10?'yes':'no'}}</p>
</div>
</body>
<script>
    // 新建实例
    var vm = new Vue({
        el: '#box', // 识别到id绑定
        data: {
            // 数据
            name: 'sailan',
            age: 20,
            hobbies: ['play,sleep'],
            info: {'addr':'上海', phone: 9527},
        },
    })
</script>
</html>

浏览器显示样式：

在这里插入图片描述

渲染后的body体代码

<body>
<div id="box">
    <p>sailan</p> 
    <p>20</p> 
    <p>[ "play,sleep" ]</p> 
    <p>{ "addr": "上海", "phone": 9527 }</p> 
    <p>20</p> 
    <p>n</p>
</div>

<script>
    // 新建实例
    var vm = new Vue({
        el: '#box', // 识别到id绑定
        data: {
            // 数据
            name: 'sailan',
            age: 20,
            hobbies: ['play,sleep'],
            info: {'addr':'上海', phone: 9527},
        },
    })
</script>
</body>

由此我们可以看出，其用法是做标记然后把data中对应的数据替换到指定位置，其还直接支持运算，三元式等，本质就是js的语法的执行替换到指定位置。

2. 常用指令

vue通过在标签属性中添加指令来控制标签，标签属性为v-xx的形式，就是vue的指令，先介绍几个常用指令如下；

v-html

让改标签里的内容能被正常渲染。`
v-text

标签内容显示为js变量对应的值。
v- show

放一个布尔值，true显示标签，false隐藏。
v-if

用法类同v-show，区别在于v-show的隐藏显示操作是通过设置标签属性display达成，而v-if则是通过dom的操作进行删除和加入。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box1">
    <p v-html="s"></p>
    <p v-html="tag1"></p>
    <hr>

    <!--  效果和<p>{{name}}</p>一样  -->
    <p v-text="name"></p>
    <hr>

    <!--  可以直接写布尔值也可以写有布尔值含义的值与变量  -->
    <p v-show="true">我是show</p>
    <hr>

    <p v-if="uk1">我是if</p>
    
</div>
</body>

<script>
    var vm = new Vue({
        el: '#box1',
        data: {
            name: 'sailan',
            tag1: '<a href="">戳戳戳</a>',
            uk1: true,
        },
    })
</script>
</html>

效果图示

在这里插入图片描述

渲染后的body代码

<body>
<div id="box1">
    <p><a href="">戳戳戳</a></p> 
    <hr> 
    
    <p>sailan</p> 
    <hr> 
    
    <p>我是show</p> 
    <hr> 
    
    <p>我是if</p>
    </div>

<script>
    var vm = new Vue({
        el: '#box1',
        data: {
            name: 'sailan',
            tag1: '<a href="">戳戳戳</a>',
            uk1: true,
        },
    })
</script>
</body>

3. 事件指令

点击事件，给标签绑定函数点击执行函数，指令格式为v-on:click可以缩写为@click。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">

    <button v-on:click="handleClick">v-on:点我1</button>

    <!--用的多-->
    <button @click="handleClick2">@click点我2</button>

    <!--如果不传参数，没有大的区别-->
    <button @click="handleClick2()">带括号点我3</button>

    <!--传参数-->
    <button @click="handleClick3(100)">带参数点我4</button>
    
    <!--传入事件-->
    <button @click="handleClick5($event)">带事件参数点我5</button>

</div>
</body>
<script>
    // 事件写到methods里如下格式
    new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        methods: {
            handleClick(){
                console.log('1111')
            },
            handleClick2(){
                console.log('2222')
            },
            handleClick3(a,b){
                console.log(a)
                console.log(b)
            },
            handleClick5(ev){
                console.log(ev)
            }
        }
    })

</script>
</html>

效果图示

在这里插入图片描述

渲染后的body体代码

<body>
<div id="box"><button>v-on:点我1</button> <button>@click点我2</button> <button>带括号点我3</button> <button>带参数点我4</button> <button>带事件参数点我5</button></div>

<script>
    new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        methods: {
            handleClick(){
                console.log('1111')
            },
            handleClick2(){
                console.log('2222')
            },
            handleClick3(a,b){
                console.log(a)
                console.log(b)
            },
            handleClick5(ev){
                console.log(ev)
            }
        }
    })

</script>
</body>

3.1 小案例点击控制标签的显示消失

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="box">
    <p v-show="isShow">我是show</p>
    <button @click="handleClick()">戳我看效果</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            isShow: true,
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            },
        }
    })
</script>
</html>

4. 属性指令

可以用来给标签属性的value值绑定成js的变量。

语法格式：

v-bind:class='js变量'  缩写成 :class='js中变量'

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .green {
            background: green;
        }

        .yellow {
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box">
    <button @click="handleClick">点我变色</button>
    <div :class="isActive?'green':'yellow'">
        <p v-show="isActive">我是健康的绿色</p>
        <p v-show="isActive2">我变黄了</p>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            isActive: true,
            isActive2: false,
        },
        methods: {
            handleClick() {
                this.isActive = !this.isActive
                this.isActive2 = !this.isActive2
            }
        }
    })

</script>
</html>

效果图示

在这里插入图片描述

4.1 vue style与class注意事项

1. 如何为属性添加多个值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .font {
            font-size: 30px;
        }

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
<div :class="class_obj" >
	我是div控件
</div>
</div>

</body>
<script>
    var vm=new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            // class_obj: 'red', //放一个是字符串
            // class_obj: ['red'],  //放多个是数组
        },
    })

</script>
</html>

2. 不刷新问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <button @click="handleClick">点击，字体变大</button>
    <div  :style="style_obj">
        我是div控件
    </div>

</div>

</body>
<script>
    var vm=new Vue({
        el: '#box', //在box这个div中可以写vue的语法
        data: {
            //对象写法
            style_obj:{
                background:'yellow',
               // fontSize:'25px'
            }
        },
        methods:{
            handleClick(){
                console.log('asdfasd')
                this.style_obj['fontSize']='30px'
            },
        }

    })

</script>
</html>

如上代码执行我们点击按钮后，字体然而不会变大，这其实是因为该变动没有被vue的代码检测到，所以没有改变，因为机制问题，我们想要变动被检测到，需先定义再修改，解开上注释的style_obj代码测试效果。

帅兰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue初学笔记

文章目录一、引入二、vue介绍与安装1. 介绍2. 安装三、使用1. 声明式渲染2. 常用指令3. 事件指令3.1 小案例点击控制标签的显示消失4. 属性指令4.1 vue style与class注意事项一、引入前端目前形势用HTML，CSS，JS写出模板页面，给后端用模板语言嵌入渲染再返回到前端浏览器做显示。部分地方使用Ajax技术前端向后端发送异步调用实现局部刷新的项目(render+ajax)。单页面只用ajax实现加载数据，dom渲染页面的项目(前后端分离雏形)。使用agular它是一
复制链接

扫一扫

专栏目录