vue简单学习-指令

最新推荐文章于 2022-09-05 17:05:11 发布
最新推荐文章于 2022-09-05 17:05:11 发布
阅读量428 收藏
点赞数
分类专栏： Java 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vivid9527/article/details/103772898
版权

1、el

 el：主要用来挂载指定的dom
*    支持的挂载的选择器有：
*          id 选择器，类选择器，标签选择器
*     注意：
*           虽然支持三种选择器，但是只能挂载一个dom，所以一般选择使用id选择器（id具有唯一性)
* *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="app">
    {{msg}}
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"div",
        data:{
            msg:"测试"
        }
    })
</script>
</html>

2、data

主要是准备数据的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div class="app">
    {{msg}}<br/>
    {{sex}}<br/>
    {{person.name}}<br/>
    {{person.age}}<br/>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"div",
        data:{
            msg:"测试",
            name:"ergou",
            sex:true,
            person:{
                name:"gg",
                age:11
            }
        }
    })
    console.debug(vue.msg);
    console.debug(vue.person.name);
</script>
</html>

3、methods

当前vue实例中所有的方法都放在methods中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{show1()}}<br/>
    {{show2("ccccc")}}<br/>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试"
        },
        methods:{
            show1(){
                console.debug("ceshi 1")
            },
            show2(msg){
                console.debug("Ceshi2"+msg+this.msg)
            }
        }
    })
</script>
</html>

4、表达式

  • vue表达式支持，加减乘除模，三目运算。
  • vue中为false的有6 个：false,null,NaN,undefined,0,""。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{num1}}+{{num2}} = {{num1+num2}}<br/>
    {{num1}}-{{num2}} = {{num1-num2}}<br/>
    {{num1}}*{{num2}} = {{num1*num2}}<br/>
    {{num1}}/{{num2}} = {{num1/num2}}<br/>
    {{num1}}%{{num2}} = {{num1%num2}}<br/>

    {{sex?"男":"女"}}

</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            msg:"测试",
            num1:11,
            num2:22,
            sex:true
        }
    })
</script>
</html>

5、操作字符串

java中字符串String的方法，在vue中也可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{str}}<br/>
    {{str.length}}<br/>
    {{str.substring(1,3)}}<br/>
    {{str.substr(2,3)}}<br/>
    {{str.substring(1,3).toUpperCase()}}<br/>
</div>
</body>
<script type="text/javascript">
    /*
    * */
    var vue = new Vue({
        el:"#app",
        data:{
            str:"abcdefg",
        }
    })
</script>
</html>

6、v-text和v-html

  • v-text作为纯文本展示，标签不会起作用
  • v-html作为值，会被浏览器解析
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-text = "text">
        a
    </div>
    <div v-html = "html">
        b
    </div>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           text:"<h1>v-text作为纯文本展示，标签不会起作用</h1>",
            html:"<h2>v-html作为值，会被浏览器解析</h2>"
        }
    })
</script>
</html>

7、v-for

 vue中支持循环的有：
*       整数
*       字符串
*       数组
*       对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--循环数字,如果需要索引，（v,i），直接写v，不展示索引-->
    <ul>
        <li v-for="(v,i) in num">{{v}}===suoyin {{i}}</li>
    </ul>
    <hr/>
    <!--循环字符串-->
    <p v-for="(v,i) in str">{{v}}----索引{{i}}</p>
    <hr/>
    <!--循环数组-->
    <p v-for="(v,i) in arr">{{v}}----索引{{i}}</p>
    <!--循环对象-->
    <hr/>
    <p v-for="(v,k) in person">{{v}}----k:{{k}}</p>

</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            num: 10,
            str: "abcde",
            arr: ["a", "b", "c", "d"],
            person: {
                name: "ergou",
                age: 22,
                sex: true
            }
        }
    })
</script>
</html>

8、v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-bind  主要用来绑定属性的-->
    <!--原生写法-->
    <img src="images/1.jpg" style="width: 300px;height: 200px">
    <!--使用v-bind-->
    <img v-bind:src="src" v-bind:width="width" v-bind:height="height">
    <!--简洁写法-->
    <img :src="src" :width="width" :height="height">
    <!--使用v-bind的方式来取图片（简写方式 直接绑定对象）-->
    <img v-bind="options">
</div>
</body>
<script type="text/javascript">
    /*
    * vue中支持循环的有：
    * */
    var vue = new Vue({
        el: "#app",
        data: {
            src: "images/1.jpg",
            width:800,
            height:500,
            alt:"图片不存在",
            options:{
                src: "images/1.jpg",
                width:800,
                height:500,
                alt:"图片不存在",
            }

        }
    })
</script>
</html>

9、v-model

  v-model  双向绑定
    他支持的标签：
        <input>
        <select>
        <textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">{{username}}<br/>
    <input type="checkbox" v-model="hobbys" value="1">爱好1
    <input type="checkbox" v-model="hobbys" value="2">爱好2
    <input type="checkbox" v-model="hobbys" value="3">爱好3
    <input type="checkbox" v-model="hobbys" value="4">爱好4<br/>
    {{hobbys}}
    <input type="radio" v-model="sex" value="5">男
    <input type="radio" v-model="sex" value="6">女
    <br/>{{sex}}
    <br/>
    <select v-model="country">
        <option value="-1">请选择</option>
        <option value="zh">中国</option>
        <option value="us">美国</option>
        <option value="jp">日本</option>
    </select><br/>
    {{country}}
    <br/>
    <textarea v-model="intro" rows="5" cols="20"></textarea>{{intro}}

</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //这里相当于默认值，一旦input输入值改变，上面展示的也会改变
            username: "二狗",
            hobbys:["1","2","3"],
            sex:6,
            country:"zh",
            intro:"踩踩踩踩踩"

        }
    })
</script>
</html>

10、v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <span style="color: red;" v-if="age>60&&age<=100">老年了</span>
    <span style="color: goldenrod;" v-else-if="age>30&&age<=60">中年</span>
    <span style="color: green;" v-else-if="age>18&&age<=30">青少年了</span>
    <span style="color: lightseagreen;" v-else-if="age>=0&&age<=18">儿童</span>
    <span style="color: deeppink;" v-else>非正常年龄</span>
</div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            age: 60,
        }
    })
</script>
</html>

10、v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--v-on: 语法格式，应该写表达式或者触发的函数-->
    <div id="app">
        <!--完整写法-->
        <input type="button" v-on:click="num++" value="按钮">
        {{num}}
        <input type="button" @click="show('传参')" value="按钮2">
        <hr/>
        <input type="button" @mouseover="over" @mouseout="out" value="移进移出">
    </div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
           num:0
        },
        methods:{
            show(msg){
                alert("show show show show ..."+msg);
            },
            over(){
                console.debug("悬停触发")
            },
            out(){
                console.debug("移除")
            }
        }
    });
</script>
</html>

10、v-show

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!--v-show: 控制标签属性   是style="display: block"  还是 style="display: none"-->
    <div id="app" >
        <div v-show="isShow">哈哈哈哈</div>
        <input type="button" @mouseover="show" value="显示和隐藏">
    </div>
</body>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            show(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>
</html>
vi-vi-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue简单学习
书唐瑞的博客
06-25 220
官网 【工具】 Visual Studio Code 安装插件 【使用】 创建一个目录,并在目录中创建一个html文件,如下 使用Visual Studio Code打开目录 在文件中写入内容 然后右击文件任一处 选择’Open with Live Server’,浏览器出现 表示成功了. 当我们改动html文件,并保存后,网页会自动刷新,实时查看结果. v-html ...
vue入门简单学习
恒二哥的博客
11-08 492
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue简单学习之 Vue.js 简介与一个简单的Vue.js实例
无根的浮萍
03-05 288
什么是Vue.js Vue 是目前最火的前端框架，React 是最流行的前端框架，React 可以开发手机APP，Vue也可以，需要借助于Weex 只关注于视图层 为什么要学习流行框架 提高开发效率 发展流程： 原生JS --&amp;amp;gt; JQuery之类的类库 --&amp;amp;gt; 前端模板引擎 --&amp;amp;gt; Augular.js / Vue.js （能够帮助我们减少不必要的DOM操作，提高渲染效率，...
Vue.js简单学习记录(未完待续...)
Aizen_Sousuke的博客
11-04 184
Vue.js是构建用户界面的渐进式== JavaScript框架 == 只关心视图层，可以自底向上逐层应用。 一个简单的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 </title> <script src="htt...
Vue介绍与入门（一篇就可入门）
热门推荐
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
vue-context-menu-vue js的上下文菜单组件。-Vue.js开发
05-27
这个组件允许用户自定义菜单项，通过简单的指令和事件监听来触发和控制菜单的显示与操作。 在使用`vue-context-menu`时，你需要首先将其安装到你的Vue项目中。可以通过npm或yarn进行安装： ```bash npm install ...
vue-admin-template-master.zip
05-21
这个模板设计简洁，没有包含过于复杂的模块，因此非常适合学习Vue的基础知识和基本项目结构。 1. **Vue基础知识**：Vue的核心特性包括声明式渲染、组件化、指令系统和响应式数据绑定。在vue-admin-template-master...
vue-next-drag:vue3 可视化拖拽demo
05-02
在这个项目中，开发者可能使用了像`vuedraggable`这样的库来处理拖放事件，它提供了与Vue 3兼容的指令和组件，使得实现拖拽功能变得简单。通过阅读源代码，我们可以深入了解如何在Vue 3中集成TypeScript和拖拽功能，...
vue.js指令v-model实现方法
10-20
Vue.js的`v-model`指令是其核心特性之一，它为开发者提供了数据双向绑定的能力，使得视图与模型之间的交互变得更加简单和直观。在HTML表单元素如`<input>`、`<select>`或`<textarea>`上使用`v-model`，能够实时反映...
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue...持续学习和实践，是成为Vue.js专家的关键。
Vue的简单学习（一文快速上手Vue2.0！）
an_gentle_killer的博客
08-08 2817
页内目录 一，Vue的介绍 二，基于vue.js的学习 三，Vue的使用模板 四，Vue的简单实用 五， 六， 一，Vue的介绍（Vue官网） 来看看官方的解释 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（概括官网的话就是易用.
初识 vue —— 最简单的前后端交互示例
weixin_30384031的博客
10-11 1万+
一、初识 vue 时的困惑 最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vue...
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5411
Vue 入门基础篇
Vue入门---电商项目
juntech.top
09-12 1613
学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 0.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端...
vue 下拉框_前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
weixin_39564368的博客
12-11 173
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。一、HTML简单的回顾（一）HTML 基本结构<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- he...
Vue简单快速入门
维他柠檬茶的博客
04-22 1645
Vue内容分发 (slot插槽)1.原本使用组合的组件方式2.使用slot插槽进行组合组件自定义事件1.关键点2.例子 内容分发 (slot插槽) slot插槽的作用：组合组件解耦合 1.原本使用组合的组件方式 <p>组件标题</p> <ul> <li>组件的内容1</li> <li>组件的内容2 </li> <li>组件的内容3</li> </ul> 2.使用
拓展07-EasyUI自定义iconCls菜单图标icon
vivid9527的博客
12-14 3553
1、效果图 左侧菜单树，和选项卡tabs显示自定义图标。 先推荐一个icon图标下载的网站：https://www.easyicon.net/ 2、iconCls属性 3、准备图标icon 可以从上面推荐的网址下载，基本上各种类型都有 将下载好的图标放入easyui图标文件夹内webapp/easyui/themes/icons 4、添加icon.css 按照上面的样式进行添加自己想要的 b...
SSM实现微信登录
vivid9527的博客
01-16 1851
1、准备工作 1、官网 微信开放平台：https://open.weixin.qq.com/ 微信开放文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1.2、注册认证     要想接入微信的登录功能，首先需要在微信开发平台进行用户的注册，同时需要认证为开发者，再...
vue-big-screen
最新发布
08-02
使用Vue-big-screen进行大屏数据展示的开发过程也相对简单。通过引入相关的组件和指令，开发人员可以通过编写简洁的代码来创建出功能完善的大屏页面。Vue-big-screen还提供了丰富的文档和示例，开发人员可以根据需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值