Vue_初学Vue的基本使用

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

1.插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丑丑</title>
</head>
<body>
    <div id="test" >
        <p>{{fuck}}</p>
    </div>
    
    <script src="./vue-v2.6.10.js"></script>
    <script>
        var vue = new Vue({
            el:"#test",
            data:{
                fuck:"Hello World!!!",
            }


        });

    </script>
</body>
</html>

el:元素的选择器 (比如id选择器->#test      class选择器->.test)

data:数据 (比如kk:"我是内容")

插值的使用:{{fuck}} (插值的使用是 外层用两个大括号包住 里面写data里的属性值)

2.vue指令的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令的使用</title>
</head>
<body>
    <div class="test" >
        <p v-if="kk" >{{fuck}}</p>
    </div>
    
    <script src="./vue-v2.6.10.js"></script>
    <script>
        var vue = new Vue({
            el:".test",
            data:{
                fuck:"Hello World!!!",
                kk:1,
            }
        });

    </script>
</body>
</html>

语法: 

v-if="data里属性的名字"

data 里的 kk 值为1 = true, 0=false 

实现的效果等于 v-if里的值为true是 就显示 为false时加了指令的 元素就会被删除 达到了显示隐藏的效果

3. v-html于v-text的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令的使用</title>
</head>
<body>
    <div class="test" >
        <p  >html</p>
        <p  v-html="html" >html1</p>
        <p  v-html="html2" >html2</p>
        <p  >text</p>
        <p  v-text="text1">text</p>
        <p  v-text="text2">text2</p>
    </div>
    
    <script src="./vue-v2.6.10.js"></script>
    <script>
        var vue = new Vue({
            el:".test",
            data:{
                text1:"我是text1的内容",
                text2:"<s>我被掰弯了</s>",
                html:"我是html的内容",
                html2:"<s>我被掰弯了</s>"
            }
        });

    </script>
</body>
</html>

语法:

v-html="data属性里值的名字"

1.v-html 和一般标签包裹的内容  优先显示 v-html对应的内容

2.v-html 的内容一段 代码时 会编译代码 显示出来

v-text="data属性里值的名字"

1.v-text 和一般标签包裹的内容  优先显示 v-text对应的内容

2.v-text 的内容一段 代码时 不会编译成代码执行 而会原原本本的显示

3. v-bind:href 

<!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="./vue-v2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind 绑定属性值的 v-bind:属性名字 -->
        <!-- <img v-bind:src="img_path" alt=""> -->

        <a v-bind:href="'http://127.0.0.1:900/getone?id='+ids"></a>

    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            img_path:'./4-small.jpg',
            ids:'1'
        }
    });

</script>
</html>

语法:

v-bind:标签属性名称

需要注意 如果是传递值的 时候 'http://127.0.0.1:900/getone?id=‘  如果是写死的代码 得再用一个单引号‘’包住

传递的变量数值 照常用+拼接

v-bind:class 的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>香蕉船</title>
    <style type="text/css">
        .r{
            color: aliceblue;
        }
        .g{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="app">
        <div v-bind:class="isg">aaaa</div>
    </div>

    <script src="vue-v2.6.10.js"></script>
    <script>
        var app = new Vue({
            el:".app",
            data:{
                isr:'r',
                isg:'g'
            }
        });
    </script>
</body>
</html>

先定义好CSS  然后在app 对象里 指定CSS名称 用单引号引起 

在 绑定的class属性里写上app里指定的名称

 多个指定样式用 [] 扩起来  逗号,分割

 效果:

v-bind:style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>香蕉船</title>
    <style type="text/css">
        .r{
            color: aliceblue;
        }
        .g{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="app">
        <div v-bind:style="{color:r,fontSize:f+'px'}" >aaaa</div>
    </div>

    <script src="vue-v2.6.10.js"></script>
    <script>
        var app = new Vue({
            el:".app",
            data:{
                r:'red',
                f:50
            }
        });
    </script>
</body>
</html>

style样式标签里 用{} 扩起来

样式属性 有 - 拼接的去掉 - 

 多个样式用 , 隔开

变量和字符串用+号拼接

 效果:

 第二种写法:

变量值用[] 扩起来 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>香蕉船</title>
    <style type="text/css">
        .r{
            color: aliceblue;
        }
        .g{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="app">
        <div v-bind:style="[r,f]" >aaaa</div>
    </div>

    <script src="vue-v2.6.10.js"></script>
    <script>
        var app = new Vue({
            el:".app",
            data:{
                r:{
                    color:'red'
                },
                f:{
                    fontSize: '50px'
                }
            }
        });
    </script>
</body>
</html>

v-bind 的简写形式

:标签属性名

:号加标签属性名字

示例:

<div :style="[r,f]" >aaaa</div>

单项数据绑定

修改vue 对象里的值 会影响前端页面的值 

修改前端页面的值 但 不会影响vue对象里的值 

双向数据绑定

改变页面和改变vue的值 都会使vue对象或页面里的值 发生改变

v-model:标签属性值

示例:

<input type="text" v-model:value="val" />

 第二种写法:

<input type="text" v-model="val" />

v-model 不能使用在展示标签中 例如 p 标签 div 标签等

v-model 只能用在用户可操作的 标签上 例如 input标签 

复选框获取值问题

    <div class="app">
        <form  action="#">
            <input type="checkbox" name="eat" value="吃饭" v-model="checked" />吃饭
            <input type="checkbox" name="sleep" value="睡觉" v-model="checked" />睡觉
            <input type="checkbox" name="doudou" value="打豆豆" v-model="checked" />打豆豆
            {{checked}}

            <input type="radio" name="rad" value="男" v-model="sex"/>男
            <input type="radio" name="rad" value="女" v-model="sex"/>女
            {{sex}}
        </form>
    </div>




    <script src="vue-v2.6.10.js"></script>
    <script>
        var app = new Vue({
            el:".app",
            data:{
                checked:[],  //复选框 选中的值
                sex:[]  //单选按钮 选中的值
            }
        });

    </script>

 input  checkbox 标签上加上 v-model="app对象data里的属性名"

单选按钮获取值的问题

  input  radio 标签上加上 v-model="app对象data里的属性名"

事件修饰符

官方文档:

API — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/api/#v-model

 v-model.number 强制转换为数值类型

v-model.trim 去掉首尾的空格字符

绑定事件

官方文档:

API — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/api/#v-on

v-on:click="app对象data里的方法名" 

 

  

v-show

v-show="boolean"

 使用v-show控制标签来回切换显示

 

v-if

v-if="判断"

v-else-if="判断"

v-else=""

v-for 

v-for="(值,键) in 数组名"

输出数组 

 

输出对象

v-once

数据只渲染一次 只绑定一次 之后不会改变 

生命周期:

Vue 实例生命周期

 

<script>
        var app = new Vue({
            el:'#siki',
            data:{
                msg:''
            },
            beforeCreate(){
                console.log('1.我是beforeCreate,创建之前执行' );
            },
            created(){
                console.log('2.我是create,创建完成之后执行');
            },
            beforeMount(){
                console.log('3.我是beforeMount,被挂载之前调用');
            },
            mounted(){
                console.log('4.我是mounted,被挂载之后调用'+ this.$refs.msgText.innerHTML);
            },
            beforeUpdate(){
                console.log('5.我是beforeUpdate,数据跟新之前被调用'+ this.$refs.msgText.innerHTML);
            },
            updated(){
                console.log('6.我是update,数据跟新之后被调用'+ this.$refs.msgText.innerHTML);
            },
            beforeDestroy(){
                console.log('7.我是beforeDestroy,销毁之前被调用');
            },
            destroyed(){
                console.log('8.我是destroyed,销毁之后被调用');
            },
            methods:{
                OnDestroy(){
                    this.$destroy(); //触发destroyed函数 销毁函数
                }
            }
        });

    </script>

黑狗向前跑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue_dev_tools.crx
04-12
Vue.js 是一款流行的轻量级前端JavaScript框架，它简化了网页和单页应用（SPA）的开发过程。Vue DevTools 是一个强大的浏览器...所以，无论你是初学者还是经验丰富的开发者，都应该把Vue DevTools纳入你的开发工具箱。
Vue_training
03-26
学习者可以通过Vue_training了解如何创建一个基本的Vue实例，并在HTML中使用Vue的特性来构建动态视图。 2. **组件化开发**：Vue的核心特性之一是组件化，它允许我们将应用拆分成可复用的组件。在Vue_training中，你...
vue的基本使用
faramita_of_mine的博客
03-09 5588
vue的基本使用一、简介二、vue 的安装三、生命周期钩子四、模板语法五、常用指令六、数据侦听器七、Class、Style 绑定八、条件渲染九、列表渲染十、表单输入绑定十一、组件十二、插槽 一、简介   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
VUE的基本使用。
qq_61576523的博客
04-06 8630
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
Vue----vue的基本使用
emmmm.....
04-28 256
文章目录2 vue的基本使用2.1 基本使用步骤2.2 基本代码与MVVM的对应关系 2 vue的基本使用 2.1 基本使用步骤 1.导入vue.js的script脚本文件可在官网下载 2.在页面中声明一个将要被vue所控制的DOM区域 3.创建vm对象(vue的实例对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
Vue的基本运用
最新发布
weixin_46098984的博客
09-11 211
Vue.js 是一套用于构建用户界面的渐进式框架。
Vue基本使用
weixin_30500663的博客
04-29 2233
Vue.js是一款流行的开源JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。由尤雨溪在2014年2月发布的。 一 基本语法 1. vue的使用要从创建Vue对象开始 let vm = new Vue(); 2.创建vue对象 创建vue对象的时候，需要传...
Vue_vue_
09-28
1. **Vue基础（一）基本语法**：这部分内容可能涵盖Vue实例的创建、数据绑定、事件处理、条件渲染、循环等基础知识。数据绑定是Vue的核心特性，允许我们直接将数据模型与视图进行关联，实现双向数据绑定。 2. **Vue...
vue_test_基于vue的邮箱验证_vue初学者的一些示例源码_vue_数据的双向绑定等_
09-30
Vue_test_基于vue的邮箱验证项目是一个专门为Vue初学者设计的学习资源，它包含了多种数据双向绑定的示例以及动态效果的实现，帮助初学者深入理解Vue的核心概念和应用。 在Vue中，数据的双向绑定是其核心特性之一，...
Vue基础——Vue的基本使用
NGUP_LEE的博客
05-02 1336
文章目录一、基本使用步骤测试样例测试样例代码中MVVM对应关系图 一、基本使用步骤 导入Vue.js的script脚本 在页面中声明一个将要被Vue控制的DOM区域 创建VM实例对象（Vue实例对象） 测试样例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wi
vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别
xiao廸要飞
08-26 675
今天看vue文档时，事件修饰符里面有一部分看不明白，特地写了个demo测一下，一些新手心得，互相学习。 疑问如下： emmm 是什么意思？ v-on:click.prevent.self的demo如下： <div id="box"> <div @click="alert(1)"> <a href="/#" @click="alert(2)">a标签 ..
VUE学习笔记--Vue的基本使用
emmmm.....
03-09 510
文章目录基本使用步骤指令的概念内容渲染指令属性绑定指令事件绑定指令 基本使用步骤 1.导入vue.js的script脚本文件(可在官网下载) vue官网 2.在页面中声明一个将要被vue所控制的DOM区域 3.创建vm实例对象(vue的实例对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
VUE基础入门使用教程
Jan's的博客
05-17 1014
第一个Vue程序 .html <!--view层 ${} 变成了一个模板--> <div id="app"> <ul> <li><span v-bind:title="m">鼠标悬停几秒查看此处动态绑定的提示信息！</span> </li> <li>{{name}}</li> <li>{{tit.name}}</li&
Vue的基本操作
赵小准的博客
05-25 697
一、使用VUE 1、引入vue.js文件 //下载后导入 <script src=vue.js></script> 2、通过下面的代码展示用，创建一个Vue的实例，然后通过应用的id嵌入根元素，将数据放入一个对象data中，并且将表达式传入div中{{msg}}（一定注意必须是双大括号） <div id="app"> {{ msg}} </div&g...
Vue基本使用二-指令
忘掉地平线
12-04 755
指令 (Directives) 是带有 v- 前缀的特殊属性 常用指令v-text// 用来设置当前元素的文本内容。相当于 innerText 的功能 <h1 v-text="msg">默认的文本内容</h1>v-html<h1 v-html="msg">默认的文本内容</h1>v-bind 作用:用来给当前元素添加HTML属性，进行HTML属性数据的动态绑定 v-bind:title
Vue入门，8大基本用法
橘子hhh
08-18 1341
以上为Vue最基础且常用的内容， 下次更新项目应用中整体结构、服务启动、路由等
Vue的开始以及基本指令详解
会飞的小鹿
11-04 1059
为什么学vue？ vue是中国大神尤雨溪创建的js框架。 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 任何描述都不及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值