Vue基础

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

Vue简介：

1.vue是javaScript框架
2.简化Dom操作
3.响应式的数据驱动

第一个vue程序：

el：挂载点
data：数据对象

<body>
    <div id="app">
        {{msg}}
        <br>
        {{student.name}} {{student.age}} //对象.属性 
        <br>
        {{school[0]}} {{school[1]}} {{school[2]}} //对象[num]
    </div>
</body>
<script>
    new Vue({ // 1.创建vue实例对象
        el: "#app", // 2.设置el属性
        data: { // 3. data属性
            // 字符串
            msg: "hello vue!",
            // 对象
            student: {
                name: "王一",
                age: "21"
            },
            // 数组
            school: ["清华大学", "北京大学", "复旦大学"]
        }
    })
     //输出：hello vue!
	//王一 21
   //清华大学 北京大学 复旦大学
</script>

vue指令：

1.内容绑定，事件绑定
v-text v-html v-on基础
2.显示切换，属性绑定
v-show v-if v-bind
3.列表循环，表单元素绑定

v-text

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <h2 v-text="msg">显示</h2> //所有内容都会被替换成msg对应的内容
        <h2>显示{{msg}}</h2> //只有差值表达式{{}}中内容会被替换msg对应的内容
        <h2 v-text="test+'世界'">显示</h2> //字符串拼接
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            test: "你好"
        }
    })
</script>

在这里插入图片描述

v-html

这里是引用
在这里插入图片描述

<body>
    <div id="app">
        <p v-html="msg"></p>
        <p v-text="msg"></p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "<a href='http: //www.baidu.com'>网址</a>"
        }
    })
</script>

在这里插入图片描述

v-on基础

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="@简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeLike">{{like}}</h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            like: "足球"
        },
        methods: {
            doIt: function () {
                alert("hello vue!")
            },
            changeLike: function () {
                this.like = "乒乓球"
            }
        }
    })
</script>

v-on补充

这里是引用
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            doIt: function (a, b) {
                console.log("hello vue");
                console.log(a);
                console.log(b);
            },
            sayHi: function () {
                alert("吃了没")
            }
        }
    })
</script>

计数器

在这里插入图片描述
在这里插入图片描述

<body>
    <!-- 计数器 -->
    <div id="app">
        <div class="input-num">
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            add: function () {
                this.num++
            },
            sub: function () {
                this.num--
            }
        }
    })
</script>

v-show

在这里插入图片描述
在这里插入图片描述

<body>
    <!-- 切换显示 -->
    <div id="app">
        <input type="button" value="点击切换" @click=" changeShow">
        <img v-show="isShow" src="./images/1.jpg">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: false
        },
        methods: {
            changeShow: function () {
                this.isShow = !this.isShow
            }
        }
    })
</script>

v-if

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">hello v-if</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: false
        },
        methods: {
            toggleIsShow: function () {
                this.isShow = !this.isShow
            }
        }
    })
</script>

v-bind

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'" v-bind:class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            imgSrc: "./images/1.jpg",
            imgTitle: "hello vue",
            isActive: false
        },
        methods: {
            toggleActive: function () {
                this.isActive = !this.isActive
            }
        }
    })
</script>

v-for

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}{{item}}
            </li>
        </ul>
        <h2 v-for="(item,index) in obj">
            {{item.name}}{{item.age}}
        </h2>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            arr: ["北京", "上海", "广州"],
            obj: [
                { name: "王一" },
                { age: 21 },
            ]
        },
        methods: {
            add: function () {
                this.obj.push({ name: "张三" }, { age: 31 })
            },
            remove: function () {
                this.obj.shift()
            }
        }
    })
</script>

v-model

在这里插入图片描述
在这里插入图片描述

<body>
    <div id="app">
        <input type="text" v-model="msg" @keyup.enter="getM()">
        <h2>{{msg}}</h2>
        <input type="button" value="修改" @click="setM()">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello vue!!!"
        },
        methods: {
            getM() {
                alert(this.msg)
            },
            setM() {
                this.msg = "你好"
            }
        }
    })
</script>

v-pre

不会渲染，直接以差值表达式形式显示

v-once

只渲染一次，后期数据有变化也不再渲染

qq_58590962
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础
roydon
10-11 4433
vue2基础
vue基础教程
shiyzhang
07-24 2832
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5863
vue基础知识汇总
Vue基础知识测试
最新发布
简单点的博客
10-18 7322
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础入门题库
qq_46556714的博客
09-22 1万+
Vue基础入门作业(含参考答案） 单选题 1、 下列选项中，代表视图部分的是（）。 1分 A、Element B、DOM C、Model D、View 参考答案 : D 答案说明 : MVVM主要包含3个部分，分别是Model、View和ViewMode。 Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。 2、 下面选项中，是基于Chrome V8引擎的JavaScript运行环境，它可以让JavaScript运行在服务器端的是（）。 1分 A、npm.
vue基础入门
weixin_47124112的博客
06-08 4634
vue是什么，以及vue的基本指令
vue基础知识-菜鸟入门
01-03
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。...通过深入理解和熟练掌握这些Vue基础知识，开发者能够构建出功能丰富、性能优秀的Web应用。不断学习和实践，是提升Vue技能的关键。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
vue父子组件
qq_58590962的博客
08-05 2392
1.什么是父子组件？ 在一个组件中又定义了其他的组件就是父子组件。 其实局部组件就是最简单的父子组件，因为我们说过可以把vue实例看作是一个大组件。 我们在vue实例中定义了局部组件，就相当于在大组件里面定义了小组件，所以局部组件就是最简单的父子组件。 2.如何定义其他的父子组件 前面我们说过，自定义组件中可以使用data，可以使用methods,当然子定义组件中也可以使用components，所以我们也可以在自定义组件中在定义其他组件。 ...
vue自定义指令及其钩子函数
qq_58590962的博客
08-02 2089
钩子函数： 一个指定定义对象可以提供如下几个钩子函数： bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中） update: 所在组建的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模块更新。 自定义指令： 自定义指令传参： 自定义局部指令和全局指令： ...
前端面试题200道--整理中
qq_58590962的博客
10-13 462
css的居中方式 margin：0 auto; /（适用于行内元素）/ text-align：center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transfrom: translate(-50%,-50%); display: flex; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 2. px,em,rem,% 一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 二、em和rem相对.
vue自定义全局和局部过滤器
qq_58590962的博客
08-02 159
1.什么是过滤器？ 过滤器和函数和计算属性一样都是用来处理数据的，但是过滤器一般用于格式化插入的文本数据 2.如何自定义全局过滤器？ Vue.filter(" 过滤器名称"，过滤器处理函数) 3.如何使用过滤器？ {{msg | 过滤器名称}} value=“ msg | 过滤器名称 ” 4.过滤器注意点： 只能在插值语法和v-bind中使用 一个数据可以交给多个过滤器使用 全局过滤器： 局部过滤器： ...
Vue基础教程：轻松掌握核心指令与特性
一、Vue基础语法 1. HelloWorld Vue的HelloWorld示例展示了如何创建一个简单的Vue实例。首先引入vue.js库，然后在HTML中选择一个具有ID的DOM元素，通过Vue实例将数据绑定到该元素。Vue实例的数据可以通过双大括号{{ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值