Vue，什么是Vue及Vue.js基本指令

最新推荐文章于 2022-10-30 23:36:05 发布
最新推荐文章于 2022-10-30 23:36:05 发布
阅读量352 收藏 1
点赞数 2
分类专栏： Vue 文章标签： Vue.js 前端 vue 什么是Vue 基本指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenriyan/article/details/93376809
版权

什么是Vue

是目前最火的前端框架，React是最流行的一个前端框架 (React除了开发网站，还可以开发手机App，Vue语法也可以用户进行手机App开发的，需要借助于Weex)
vue.js是前端主流框架之一，和Angular.js、React.js一起，并称为前端主流三大框架！
vue.js，不仅容易上手，还便于与第三方你库或既有项目整合。
前端主要工作，主要负责mvc中的v这一层；主要工作是和界面打交道；

为什么要学习流行框架

  1. 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
  2. 提高开发效率的历程：原生js --jquery之类的类库—前端模板引擎—Angular.js/Vue.js
  3. 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多 的时间去关注业务逻辑；

框架和库的区别

  1. 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要换框架，则需要重新架构整个项目。
  2. 库（插件）：提供某一个小功能，对项目的侵入性较小，如果开某个库无法完成某些需求可以很容易切换到其它库实现需求

MVC和MVVM的区别

  1. MVC是后端分层开发的概念
  2. MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端视图层，分喂了三部分Model，VIew，VM ViewModel
    在这里插入图片描述

Vue.js基本代码和MVVM之间的对应关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入Vue的包 -->
    <script src="lib/vue.js"></script>
</head>
<body>
    <!-- 将来new 的Vue实例，会控制这个元素中的所有内容 -->
    <!-- Vue 实例所控制的这个元素区域，就是我们的V -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>
        
    <script>
        //2.创建一个Vue实例
        //当我们导入包之后，再浏览器的内存中，就多了一个vue 构造函数
        //注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者
        var vm  = new Vue({
            el:'#app',//选择器，表示，当我们new 的这个Vue实例，要控制页面上的那个区域
            //这里的 data 就是MVVM中的M,专门来保存每个页面的数据的
            data:{//data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue'//通过vue提供的指令，很方i版的就能把数据渲染到页面上，程序员不再手动操作DOM元素【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
            }
        })    
    </script>
</body>
</html>

v-cloak,v-text,v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入Vue的包 -->
    <script src="lib/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 将来new 的Vue实例，会控制这个元素中的所有内容 -->
    <!-- Vue 实例所控制的这个元素区域，就是我们的V -->
    <div id="app">
        <!-- 使用v-cloak 能够解决插值表达式闪烁的问题 -->
        <p v-cloak >{{ msg }}</p>
        <!-- 默认 v-text 是没有闪烁问题的 -->
        <!-- v-text 会覆盖元素原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 -->
        <h4 v-text='msg'></h4>
        <!-- v-html会把字符串当作html代码来处理 -->
        <div v-html='msg2'></div>
    </div>
        
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>ljlj;jlk;jl;jkl;j;l</h1>'
            }
        })
    </script>
</body>
</html>

跑马灯例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <!-- 1.导入Vue的包 -->
        <script src="lib/vue.js"></script>
</head>
<body>
    <!-- 2.创建一个控制区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value='别浪' @click="stop">
        
        <h4>{{msg}}</h4>
    </div>


    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪',
                intervalId:null//在data上定义定时器id
            },
            methods:{
                lang(){//es6的方法格式
                    console.log(this.msg)//在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.属性名或者this.方法名来进行访问。这里的this就表示我们new出来的vm实例
                    if(this.intervalId!==null)return;
                    this.intervalId = setInterval(()=>{//es6语法，这时候内部的this就指向了外部的this
                    //获取到头一个字符
                    var start = this.msg.substring(0,1)
                    //获取到后面的所有字符
                    var end = this.msg.substring(1)
                    //重新拼接得到新的字符串，并赋值给this.msg
                    this.msg = end + start
                    //注意：vm实例，会监听自身上data中所有数据的改变，只要数据一发生改变，就会自动把最新的数据，从data上同步到页面中去（好处：减少了程序员对dom的操作，只需要关心数据不需要考虑如何重新渲染页面）
                    },400)
                },
                stop(){//停止定时器
                    clearInterval(this.intervalId)
                    //停止定时器之后需要把intervalId重新赋值为null
                    this.intervalId = null;
                }
            }
        })
        //分析：
        //1.给【浪起来】按钮，绑定一个事件
        //2.在按钮的事件处理函数中，写相关的业务处理代码：拿到msg字符串，然后调用字符串substring方法来进行字符串的街区操作，把第一个字符截取出来，放到最后一个位置即可；
        //3.为了实现点击按钮，自动截取的功能，需要把2步骤中的代码，放到一个定时器中去
    </script>
</body>
</html>

事件修饰符

  • .stop 阻止冒泡

  • .prevent 阻止默认事件

  • .capture 添加事件监听器时使用事件捕获模式

  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once 事件只触发一次

    .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为

v-model及简易计算器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!-- v-bind 只能实现数据的单向绑定，从M 自动绑定到view，无法实现数据的双向绑定 -->
        <!-- <input type="text" :value="msg" style="width:100%;"> -->

        <!-- 使用v-model指令，可以实现 表单元素和Model中的数据双向绑定 -->
        <!-- 注意：v-model只能运用在表单元素中例如：input、select、checkbox、textarea等 -->
        <input type="text" v-model="msg" style="width:100%;">
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'开心起来把。'
            },
            methods:{

            }
        })
    </script>
</body>
</html>
简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select name="" id="" v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:'+'
            },
            methods:{
                calc(){
                    // switch(this.opt){//方式一
                    //     case '+': 
                    //     this.result = parseInt(this.n1) + parseInt(this.n2);
                    //     break;
                    //     case '-':
                    //     this.result = parseInt(this.n1) - parseInt(this.n2);
                    //     break;
                    //     case '*':
                    //     this.result = parseInt(this.n1) * parseInt(this.n2);
                    //     break;
                    //     case '/':
                    //     this.result = parseInt(this.n1) / parseInt(this.n2);
                    //     break;
                    // }
                    var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'//方式二
                    this.result = eval(codeStr)
                 }
            }
        })
    </script>
</body>
</html>

在Vue中使用样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <style>
        .red{
            color:red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一种使用方式，直接传递一个数组，注意这里class需要是以哦那个 v-bind 做数据绑定 -->
        <h1 :class="['thin','italic']">直接传递一个数组</h1>
        <!-- 在数组中使用三元表达式 -->
        <h1 :class="['thin','italic',flag?'active':'']">在数组中使用三元表达式</h1>
        <!-- 在数组中使用对象来代替三元表达式，提高代码可读性 -->
        <h1 :class="['thin','italic',{'active':flag}]">在数组中使用对象来代替三元表达式</h1>
        <!-- 在为 class 使用v-bind绑定对象的时候，对象的属性类名，由于对象的属性可带银行，也可以不带银行，所以这里我没写引号; 属性的值是一个标识符 -->
        <!-- <h1 :class="{red:true,thin:true,italic:false,active:false}">在数组中使用对象来代替三元表达式</h1> -->
        <h1 :class="classObj">在数组中使用对象来代替三元表达式</h1>


        <!-- 使用内联样式 -->
        <!-- 对象就是无序键值对的集合 -->
        <h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
        <h1 :style="styleObj1">styleObj1</h1>
        <!-- 对象的数组 -->
        <h1 :style="[styleObj1,styleObj2]">对象的数组</h1>
        
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{red:true,thin:true,italic:false,active:false},
                styleObj1:{color:'red','font-weight':200},
                styleObj2:{'font-style':'italic'}
            },
            methods:{
               
            }
        })
    </script>
</body>
</html>

v-for和key属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 普通数组 -->
        <p v-for="(item,i) in list">索引值：{{i}} 每一项：{{item}}</p>
        <!-- 对象数组 -->
        <p v-for="(user,i) in list2">索引：{{i}}--{{user.id}}-----{{user.name}}</p>
        <!-- 遍历对象,除了有key，val，在第三个位置还有一个索引值 -->
        <p v-for="(val,key,i) in user">索引：{{i}}    值：{{val}}  键：{{key}}</p>
        <!-- 迭代数字,in后面我们可以放普通数组，对象数组，对象，还可以放数字，如果使用v-for迭代数字，count值从1开始 -->
        <p v-for="count in 10">这是第{{count}}次循环</p>

        <!-- 注意：v-for循环的时候，key属性只能使用number获取string
        key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
        在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在是以哦那个
        v-for的同事，指定唯一的字符串/数字类型:key值 -->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6],
                list2:[
                    {id:1,name:'zs1'},
                    {id:2,name:'zs2'},
                    {id:3,name:'zs3'},
                    {id:4,name:'zs4'},
                    {id:5,name:'zs5'},
                ],
                user:{
                    id:1,
                    name:'齐天大圣',
                    gender:'男'
                }
            },
            methods:{

            }
        })
    </script>
</body>
</html>

v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag = !flag">
        <!-- v-if的特点：每次都会重新删除或创建元素
            v-show的特点：每次不会重新进行dom的删除和创建操作，只切换了元素的display:none样式 -->
         <!-- v-if 有较高的切换性能消耗，v-show有较高的初始渲染消耗
            如果元素涉及到频繁的切换，最好不要使用v-if，则推荐v-show
            如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if  -->
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
               
            }
        })
    </script>
</body>
</html>
wenriyan
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue指令介绍
qwerty499256的博客
04-12 166
vue2常用指令介绍
Vue指令
weixin_47098536的博客
02-27 246
vue指令是一种以v-开头的特殊性属性，每一种指令它都写在元素的开始部分，每一种指令都有着自己的具体的功能，功能涉及到内容渲染、条件判断、列表渲染、表单内容的收集、事件绑定等等。语法不同，v-if的切换频繁的时候不建议使用，因为它的创建和删除所带来性能开销较大,v-show是通过隐藏元素来实现显示或隐藏的，一般情况下，尽量建议大家使用v-show。使用v-model完成表单数据的收集，能够将表单控件和data的数据一一对应起来，如果数据变化后表单项中的内容，如果表单项内容改变了也会驱动data数据的变化。
vue的指令
pingting_的博客
02-15 707
vue的指令1.vue 的指令1.1 指令的概念与分类1.2 内容渲染指令1.3 属性绑定指令1.4 事件绑定指令1.4.1 如何绑定1.4.2 事件对象1.4.3 事件修饰符1.4.4按键修饰符1.5 双向绑定指令1.5.1 基本使用1.5.2 v-model 指令的修饰符1.6 条件渲染指令1.6.1 v-if 和 v-show1.6.2v-else-if 和 v-else1.7 列表渲染条件1.7 品牌列表案例源码 1.vue 的指令 1.1 指令的概念与分类 指令 是 vue 为开发者提供的模板语
Vue是什么？
m0_59345890的博客
08-30 4175
而在框架的开发模式下，开发者应该按照框架提供的规范来进行后续的开发，因此框架模式下，控制权由框架把控；5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。（3）框架与库的使用场合。4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；..
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.global.js，Vue.js 框架的核心文件之一
最新发布
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
vue.min.js官方2.6.14版本
03-11
vue.min.js官方2.6.14版本
Vue指令介绍及使用
AI_huihui的博客
11-06 2190
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
Vue指令——常用指令
catfishlyf的博客
09-22 626
一、什么是vue指令 指令是可以写在DOM元素中的小命令，他们以 v- 为前缀，vue就能识别这是一个指令并保持语法的一致性。 开始接触vue的时候，一定会使用到其中的几个指令，比如： v-if 、 v-for … 这些都是vue预设的，用起来是相当的方便。 二、常用指令 （一）v-cloak     可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。     常用场
vue常用指令
xiaohua616的博客
10-30 208
vue中常用指令：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等
vue指令介绍及详解
qq_45656036的博客
05-19 441
1.什么是指令 在vue中提供了⼀些对于页面 + 数据的更为方便的输出, 这些操作就叫做指令, 以v-xxx表示 例: 在vue中 以v-xxx开头的就叫做指令 指令中封装了⼀些DOM⾏为, 结合属性作为⼀个暗号, 暗号有对应的值,根据不同的值，框架会进⾏相关DOM操作的绑定 vue中常⽤的v-指令演示 v-text: v-html: 元素的innerHTML v-if : 判断是否插⼊这个元素,相当于对元素的销毁和创建 v-else-if v-else v-show 隐藏元素 如果确定要隐藏, 会给元素
Vue.js新手入门指南
热门推荐
Gcalolin的博客
04-24 1万+
最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的结业项目。 在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发，从一个从未接触过除HTML+CSS+JavaScript+JQue
Vue中常见的指令及其含义？
ni15534789894的博客
01-23 402
v-text 只解析文本信息 v-html 可以解析超文本标签 v-if/v-else-if/v-else 与javaScript中的一样，用于判断。 v-show 通过控制元素的display css属性来控制元素的显示与隐藏 v-for 循环 v-on 绑定事件，可以用@符号来代替 v-bind 绑定元素的一个或者多个属性，用于动态更新html上元素的标签内容 v-slot 插槽 v-pre 跳过自己以及子元素的编译过程 v-model 数据的双向绑定 v-cloc
vue是什么_什么是 vue.js-Vue.js
weixin_39628247的博客
11-13 150
是一套构建用户界面的渐进式框架，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，自身不是一个全能框架，它只聚焦于视图层。【相关文章推荐：】Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，V...
什么是Vue？什么又是vue指令？
qq_65715980的博客
07-25 773
vue基本语法：v-once、v-html、.v-text、v-pre、v-cloak。
vue脚手架——axios
03-30
"Vue.js前端开发框架及VueCLI脚手架介绍" Vue.js，简称Vue，是一个轻量级且功能强大的渐进式JavaScript框架，专为构建用户界面而设计。Vue的核心理念是通过数据绑定和组件化来简化开发流程，让开发者可以专注于数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wenriyan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值