Vue笔记-1 vue基础语法

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

Vue在线应用

在线引用的vue.js ,需要网络

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

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

Hello Vue

需要先加载div块,再加载Vue实例,利用div的id与Vue实例中的el相互绑定

		1.vue实例(对象)中el属性: 	代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
		2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
		3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
		4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的第一个入门案例</title>
</head>
<body>
<hr>

<div id="app">
    {{ msg }}  {{username}} {{pwd}}

    <br>
    <span>
            {{ username }}
            <h1>{{ english }}</h1>
    </span>

</div>

{{msg}}


<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",  //element 用来给Vue实例定义一个作用范围
        data:{      //用来给Vue实例定义一些相关数据
            msg:"hello world ! hello Vue !",
            username:"lx",
            pwd :"12345",
            english:"life is hard"
        },
    });
</script>

</body>
</html>

在这里插入图片描述

Vue基础语法

1.Vue中data定义的数据类型
data: {
                msg:"hello vue",//String
                user:{name:"大笨钟",msg:"请你别太得意"},//对象
                age:23,//Integer
                lists:["晴天","大笨钟","给我一首歌的时间"],//数组
                users:[{name:"小新",age:18},{name:"小吴",age:18}]//数组对象
            }
2.vue中取值

取vue中data的值,采用双大括号 例如: {{msg}}

 const app = new Vue({
        el:"#app",
        data:{
            msg:"hello world",
            MSG:"I MISS YOU"
        }
    })

<div id="app">

    {{msg.toUpperCase()}}   <br>
    {{MSG.toLowerCase()}}
</div>

在这里插入图片描述

3. v-text和v-html

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁


<div id="app">
    {{msg}} <br>

    <p v-text="msg">这里头就被覆盖了</p>
</div>



<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"you can do it"
        }
    })
</script>

在这里插入图片描述



v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML


<div id="app2">
    <span v-html="msg"></span>
</div>


 const app2 = new Vue({
        el:"#app2",
        data: {
            msg:  "<a href=\"http://www.baidu.com\">baidu</a>"
        }
    })

点击可以实现到百度的跳转
在这里插入图片描述



4.事件绑定 v-on/@ 和methods方法

事件 事件源:发生事件dom元素 事件: 发生特定的动作 click… 监听器 发生特定动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

v-on: 可以用 @来替代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <span v-text="number"></span>
    <input type="submit" value="点击加一" v-on:click="add">
</div>



<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"Welcome !",
            number:20
        },
        methods:{
            add: function () {
                this.number++;
            }
        }
    })
</script>



</body>
</html>

在这里插入图片描述
在Vue中事件定义存在两种写法 一种是 函数名:function(){} 推荐 一种是 函数名(){} 推荐

 methods:{
               /*changecount:function(){
                   this.count++;
               }*/
               changecount(){
                   this.count++;
               }
           }


5.Vue事件参数传递

在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    {{num}}
    <input type="submit" value="阿巴阿巴" @click="addNumber(99,'小新')">
</div>

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        el:"#app",
        data:{
            num:20
        },
        methods: {
            addNumber:function (num,name) {
                this.num=++num;
                alert(name);
            }
        }
    })
</script>


</body>
</html>

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

在这里插入图片描述



6. v-show v-if v-bind

v-show:用来控制页面中某个标签元素是否展示 底层使用控制是 display 属性
v-if: 用来控制页面元素是否展示 底层控制是DOM元素 操作DOM

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的v-show使用</title>


</head>
<body>

<div id="app">


    <h2 v-if="false">显示不出来</h2>

    <h2 v-if="show">show=false无法显示</h2>

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{

        }
    })
</script>

</body>
</html>

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xht g/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的v-bind使用</title>


    <style>
        .aa{
            border: 2px red solid;
        }
    </style>
</head>
<body>

<div id="app">

    <img width="300" :title="msg" :class="{aa:showCss}"  :src="src" alt="">

    <input type="button" value="增加边框" @click="addCss">

    <input type="button" value="变成雷律" @click="changeSrc">

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el:"#app",
        data:{
            msg:"律化娜!!!",
            showCss:true,
            src:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601210269&di=fb3eeb2f43bf7245faa7bd0a97ea8c7a&src=http://b-ssl.duitang.com/uploads/item/201812/14/20181214164808_mpgek.jpg"
        },
        methods:{
            addCss(){
                this.showCss= !this.showCss;
            },
            changeSrc(){
                this.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601220429475&di=51d2ee0f727d8b812c4a7a249aac5304&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb5e8fd53f74408b35c65fd9eca99428b4c8056df.jpg";
            }
        }
    })
</script>

</body>
</html>

在这里插入图片描述

7. v-for 遍历数组

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04.Vue中v-for指令的使用</title>
</head>
<body>
<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index of arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}
        </li>
    </ul>

    <ul>
        <li v-for="book,index in books">
            {{index+1}} {{book}}
        </li>
    </ul>


</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user:{name:"小新",age:23},
            arr:["北京", "天津", "深圳"],
            books:["Java从入门到放弃","数据库从删库到跑路","Android从入门到转行"],
            users:[
                {id:"1",name:"小新",age:23,content:"life is hard"},
                {id:"2",name:"小吴",age:23,content:"life is hard and keep hard"},
            ]
        },
        methods: {

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

在这里插入图片描述



9.v-model 数据绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

1.使用v-model指令可以实现数据的双向绑定
2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

MVVM架构 双向绑定机制
Model: 数据  Vue实例中绑定数据

VM:   ViewModel  监听器

View:  页面  页面展示的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05.v-model和数据双向绑定</title>
</head>
<body>
<div id="app">


    <input type="text" v-model="message">

    <br>


    <span>{{message}}</span>

    <hr>

    
    <input type="button" value="改变Data中值" @click="changeValue">

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='总要做点什么';
            }
        }
    });
</script>
</body>
</html>

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



m0_47734729
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端框架Vue基础语法笔记
01-20
前端框架Vue基础语法笔记
让你30分钟快速掌握vue 3
jinmu520的博客
10-26 795
经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。 setup() ref() reactive() isRef() toRefs() computed() watch() LifeCycle Hooks(新的生命周期) Templa
Vue3如何定义一个基本数据类型和引用数据类型的数据
wytccc的博客
07-11 1830
① 利用reactive定义的属性，底层是通过Proxy实现的，所以，修改对象中的任何一个值的时候，vue可以监听到，并及时的更新页面。① 利用ref定义的属性，底层是通过Object.defineProperty()实现的响应式，返回的是一个RefImpl引用实现。② 在template和script中直接访问对象中的属性名即可。② 在template模板中直接访问属性名即可。③ 在script标签中需要通过。
vue3之定义数据(Ref全家桶)
weixin_43845137的博客
03-04 7911
目录vue3之定义数据只是用于展示的数据(非响应式数据)响应式数据 (Ref全家桶)定义简单数据类型判断是否为 ref对象(定义为响应式数据对象)shallowRef 定义简单数据类型的响应式customRef实现类似计算属性封装一个防抖函数 vue3之定义数据 只是用于展示的数据(非响应式数据) 常规的定义变量，这是不具有响应式的，也就是无法更改当前的试图的值 <template> <div> <div> <button @click=
Vue学习之路(2)-数据定义选项
MEdwardM的专栏
02-13 2812
引言 测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用 data选项:Vue 实例的数据对象(对象的成员变量) 类型：Object | Function var vm = new Vue({ data: function () { return { ...
Vue2源码学习笔记 - 3.Vue类的定义
小问's blog
07-19 1095
在第一篇 前置准备 章节我们新建了一个 HTML 文件，里面引用并构建了一个简单的 Vue 应用。构建一个 Vue 应用是通过 new Vue 一个对象开始的，这一节我们先来看看 Vue 类是怎样定义的，以方便我们后续的学习。......
vue3.0基础语法的练习笔记
02-07
1.vue3.0的基本语法及练习。
Vue基础day1学习资料.zip
03-31
内涵案例、笔记、PPT、作业，介绍Vue基础语法，涵盖Vue全家桶基础的pdf，笔记和照片用markdown书写
又一款MVVM组件 Vue基础语法和常用指令（1）
11-29
最近园子里vue也确实挺火，各种入门博文眼花缭乱，博主也不敢说写得多好，就当是个学习笔记，有兴趣的可以看看。 一、MVVM大比拼 关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一...
Vue基础day4学习资料.zip
03-31
内涵案例、笔记、PPT、作业，介绍Vue基础语法，涵盖Vue全家桶基础的pdf，笔记和照片用markdown书写
vue绑定数字类型 value为数字的实例
10-14
主要介绍了vue绑定数字类型 value为数字的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue笔记
RecordStudy
07-29 480
Vue.js 组件非常类似于自定义元素。有几个关键的不同： ①Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。Vue.js 组件也可以放在原生自定义元素之内 ②Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换   通过构造函数Vue创建实例化Vue对象   
vue中data定义数字类型_Vue当中options的入门属性 数据篇
weixin_36320395的博客
01-30 3447
目录：1- el 挂载点2 - data 内部数据3 - methods 方法4 - components5 - 生命周期钩子6 - prosp 外部属性(数据)数据相关属性​​：​data​、​props​、​propsData​、​computed​、​methods​、​watch。对于这些属性不一定全都需要学会，我们只需要掌握最主流的属性就好了，对于那些冷门的属性了解一下就好了，需要的时候...
vue中data定义数字类型_Vue 的几种数据类型处理方式
weixin_39612720的博客
12-20 6184
第一种数据处理在table的tr中，有些做为父级，有些做为子级，区别是用class来区分，点击父级的按钮，子级会隐藏和显示切换。{{item.title}}改变{{child.title}}var example1 = new Vue({el: "#example1",data: {data: [{id: "row_1",title: 'row1',children: [{title: 'row1...
vue3使用ref和reactive定义数据
m0_63466615的博客
04-26 5246
首先需要先从vue解构 import {reactive, ref } from "vue"; 定义数据 let state = reactive({ //使用reactive定义数据，需要写成对象的格式 global: [], }); let test = ref([]); //使用ref定义数据，直接定义即可 let testObj = ref({}); 数据赋值 // 获取所有商品 productAll().then(res => { state
vue props使用typescript自定义类型
w55100的博客
05-07 1万+
前言 Base: vue3+typescript 解决将ts中自定义的interface，传vue的props属性的问题。 问题定位 官方文档中说，props自定义类型检查是可能的。 In addition, type can also be a custom class or constructor function and the assertion will be made with an instanceof check. For example, given the following clas
彻底搞懂TypeScript的类型定义
weixin_42247414的博客
01-07 2754
vue3+ts的类型定义
Vue-data定义对象，数组，其他数据类型
文文x的博客
12-11 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-del属性的用法</title> </head> <body> <div id="app"> {{ msg+','+username }} <h1> 学生1姓名:{{ userlist[0].name }
vue 数据类型 属性
热门推荐
sunfan
03-28 3万+
data export default { name: 'app', data () { return { message:"hi vue !" } }, created(){ this.$emit('mes', this.message) } } props 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组...
vue vue-seamless-scroll
最新发布
09-04
在Vue2中，可以使用`<vue-seamless-scroll></vue-seamless-scroll>`标签进行包裹： ```html <vue-seamless-scroll></vue-seamless-scroll> ``` 在Vue3中，可以使用`<vue3-seamless-scroll></vue3-seamless-scroll>`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值