Vue2 基础语法学习

最新推荐文章于 2024-08-14 23:06:44 发布
最新推荐文章于 2024-08-14 23:06:44 发布
阅读量679 收藏 13
点赞数 21
文章标签： 学习 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41264896/article/details/137071843
版权

一、vue开发环境

开发环境为visual studio code，预先安装中文汉化包，安装插件为Live Server（浏览器实时预览）

二、vue基础

1、vue的第一个例子
<html>
    <head>
        <title>vue学习第一课</title>
        <!--引入vue.js库-->
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"Hello World！"
                }
            });
        </script>
    </body>
</html>
2、vue基础第二个例子
<html>
    <head>
        <title>vue数组及作用域范围</title>
        <!--引入vue.js库-->
    </head>
    <body>
        {{message}}
        <div id="app">
            {{message}}
           <p>
                {{school}}
           </p> 
           <p>
               学校:{{school.name}}
           </p>
           <p>
               电话：{{school.mobile}}
            </p>
            <p>
                校区：{{campus}}
            </p>
            <p>
                校区：{{campus[1]}}
            </p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"你好世界！",
                    school:{
                    	name:"师范大学",
                    	mobile:"66666666"
                	},
                	campus:["一二一校区","北京校区"]
                }
            });
        </script>
    </body>
</html>

三、v指令

1、v-text,v-content,两种功能相同，语法为v-text=“”,例如v-text=“message”
         <div id="app">
            <h2 v-text="message"></h2>
            <h2 v-text="message+'北京'"></h2>
            <h2 v-text="message">北京</h2>
            <h2 v-text="info">北京</h2>
            <h2>{{message}} China</h2>
            <h2>{{info}} China</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"你好世界！",
                    info:"师范大学"
                }
            });
        </script>
2、v-html,如果内容有html使用,语法为v-html=“”,例如v-html=“message”
 <div id="app">
            <h2 v-text="message"></h2>
            <h2 v-html="message" ></h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"<a href=\"https://www.ynnu.edu.cn\" target=\"_blank\" >师范大学</a>",
                }
            });
        </script>
3、v-on可以简写为@,语法为v-on:绑定事件，如v-on:click
        <div id="app">
            <input type="button" v-on:click="messagebox" value="单击"/>  
            <input type="button" @click="messagebox" value="单击"/>  
            <input type="button" @dblclick="messagebox" value="双击"/>  
            <input type="button" @click="changeinfo" value="修改"/>  
            <p>{{info}}</p>
            <p>请输入您的名字：<input type="text" @keyup.enter="msg"/>  </p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    info:"你是姐姐还是哥哥?",
                    name:""
                },
                 methods:{
                     messagebox:function (){
                     alert("世界你好！");
                     },
                     changeinfo:function (){
                		this.info+=",我是弟弟！";
            		},
                    msg:function(p)
                    {
                        alert("欢迎您老铁！");
                    }
               }
            });
        </script>
v-on应用，计数器
<div id="app">
            <input type="button" @click="jian" value="-"/>  
            <span>{{info}}</span>
            <input type="button" @click="jia" value="+"/>  
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    info:0
                },
                 methods:{
                     jia:function (){
                         if(this.info<10) {this.info+=1;}
                         else{alert("别点了，已经最大了");}
                     },
                     jian:function (){
                        if(this.info>0) {this.info-=1;}
                        else{alert("别点了，已经最小了");}
                    }
               }
            });
        </script>
v-show,语法为v-show=“”,true显示，false是隐藏,v-show的值是真假
        <div id="app">
            <input type="button" value="切换v-show值" @click="change" />
            <p v-show="info">
                sssssssssssssssssssssssssssssssssdadasdadadsadw
            </p>
            <p>
                <img v-show="info" src="1.png" style="width: 400px;height: 200px;" />
            </p>
            <p>
                <img v-show="age=18" src="1.png" style="width: 400px;height: 200px;" />
            </p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    info:true,
                    age:18
                },
                 methods:{
                     change:function (){
                        this.info=!this.info;
            		}
               }
            });
        </script>
v-if,与v-show类似，但是v-show是操作dispaly的属性,而v-if是直接删除或添加
        <div id="app">
            <input type="button" value="切换v-show值" @click="change" />
            <p v-if="info">
                sssssssssssssssssssssssssssssssssdadasdadadsadw
            </p>
            <p>
                <img v-if="info" src="1.png" style="width: 400px;height: 200px;" />
            </p>
            <p>
                与v-shwo的对比
            </p>
            </p>
            <p>
                <img v-show="info" src="1.png" style="width: 400px;height: 200px;" />
            </p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    info:true
                },
                 methods:{
                     change:function (){
                        this.info=!this.info;
            		}
               }
            });
        </script>
v-bind,简写为：，语法为v-bind:属性=“”,简写为:属性=“”,操作的是控件的属性，如src,class,
<html>
    <head>
        <title>V-bind</title>
        <style>
            .active{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p>
                <img v-bind:src="info" />
            </p>
            <p>
                <img :src="info"  />
            </p>
            <p>
                <img :src="info" :title="imgtitle+'!!!'"  />
            </p>
            <p>
                <img :src="info" @click="change"  :class="isactive?'active':''"  />
            </p>
            <p>
                <img :src="info" @click="change" :class="{active:isactive}"  />
            </p>
            </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                info:"1.png",
                isactive:false,
                imgtitle:"百度一下"
            },
             methods:{
                change:function (){
                    this.isactive=!this.isactive;
                }
            }
        });
</script>
</body>
</html>
v-for,循环遍历数组，集合，语法为v-for=“item in 数组名"或者v-for=”（item,index) in 数组名",类似于键值对
        <div id="app">
            <ul>
                <li v-for="item in arr">{{item}}</li>
            </ul>
            <ul>
                <li v-for="(item,index) in arr1">{{index}}---{{item}}</li>
            </ul>
            <select>
                <option v-for="item in arr2" :value="item.value" :selected="item.selected">{{item.text}}</option>
            </select>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5,6,7,8],
                arr1:["上海","北京","广州","深圳","杭州"],
                arr2:[{value:"1",text:"上海",selected:false},{value:"2",text:"北京",selected:true},{value:"1",text:"深圳",selected:false}]
            }
        });
</script>
v-model，数据双向绑定，常和表单标签一起使用
<div id="app">
            <p>请输入您的名字：<input type="text"  v-model="name"/>  </p>
            <p>请输入您的密码：<input type="password"  v-model="pwd"/>  </p>
            <h2>
                {{name}}
            </h2>
            <h2>
                {{pwd}}
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    name:"你是姐姐还是哥哥?",
                    pwd:"123456",
                }
            });
        </script>
三分藏道
关注
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
Vue2学习教程（图文齐全，附带gif动图更加简单易懂）
m0_54828595的博客
07-03 2万+
vue2的学习笔记，图文并茂，附带gif动图更加方便学习理解
超级详细的vue2学习笔记
分享学习编程中的遇到的问题,总结平时的笔记
04-29 4038
vue的视频学习笔记详细版
Vue2快速入门
最新发布
rnnf_yyds的博客
08-14 917
插值语法：{{js表达式 或者 data中对应的属性名}},插值语法用于解析标签的内容能将vue实例对象中data数据里的一些属性渲染到页面上，以下代码展示了插值语法的使用在一个vue实例中，el表示绑定的哪个容器，这里使用的是id选择器进行绑定,而data属性负责放数据,在data中我们放置了俩个属性数据，并且在 id为app的容器中，通过{{}}语法进行渲染到界面上。
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 3万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
VUE2基础知识（详细版）
weixin_59418570的博客
05-28 1877
组件是实现应用中局部功能代码和资源的集合。v-xx开头，实质是js代码的语法糖。虚拟DOM -- VDOM -- 是一个js对象有些属性需要动态来绑定，比如：动态绑定a元素的href属性；动态绑定img元素的src属性。v-bind可以给任何属性赋值，是从数据到页面的单向数据流（从data指向视图）
总结: Vue2中基础语法(一)
hmxs_hmbb的博客
05-07 1945
本人对vue的总结, 还在梳理中
Vue基础day2学习资料.zip
03-31
首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的演示文稿。这通常会覆盖以下内容： 1. **Vue实例**：Vue应用程序的核心是Vue实例，它通过`new Vue()`创建。实例可以包含数据、方法、生命周期钩子等...
vue学习基础以及大纲
07-19
通过学习Vue的基础以及深入了解其开发模式，开发者可以有效地创建Vue实例、绑定数据、安装必要的工具、理解数据绑定原理、掌握基础指令和常用指令的使用。此外，Vue的开发还应掌握自定义指令的使用、计算属性和监听...
Vue基础day3学习资料.zip
03-31
Vue的基础语法是学习Vue开发的关键，而"Vue基础day3学习资料.zip"这个压缩包提供了全面的学习资源，包括案例、笔记、PPT和作业，帮助初学者深入理解Vue的核心概念。 首先，让我们来看看"day03_Vue01-基础语法3.ppt...
vue3.0基础语法的练习笔记
02-07
Vue 3.0 基础语法实践笔记 Vue 3.0 是一个革命性的前端框架，提供了许多新的语法和功能，本笔记将对 Vue 3.0 的基础语法进行实践和...通过学习这些基础语法，可以更好地使用 Vue 3.0 开发高效、简洁的前端应用程序。
VUE2入门教程
z_kakaya的博客
12-28 1549
<title>vue使用模板</title>-- 引入vue -->
Vue基础之指令与过滤器
fanlingfang的博客
11-06 701
ES6模块化 ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。 ES6模块化规范中定义: 每个js文件都是一个独立的模块 导入其它模块成员使用import 关键字 向外共享模块成员使用export关键字 p230 Promise async/await EventLoop 宏任务和微任务 API接口案例 前端工程化 实际的前端开发: 模块化(js的模块化、css的模块化、资源的模
vue2进阶学习知识汇总
liwan09的博客
10-25 499
在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问代码实例：在根组件main.js中定义data数据，methods及computed属性页面子组件中调用根组件数据实现 注意：对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。使用 $parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触
vue2 学习笔记（保姆系列教程）
quokka56的博客
02-21 3897
每天学习30分钟，vue2 入门级保姆教程，完结撒花啦，一起共同进步喽
【vue2】回顾vue2纯语法(建议收藏 不包括router)
weixin_52479803的博客
05-13 666
回顾vue2纯语法(超级全 建议收藏 忘记了ctrl+f一查就知道了)
学Vue2基础内容，这一篇就够了
weixin_49931650的博客
07-18 1766
Vue2笔记--基础篇 二万多字，小白学了都说好 内含Vue的一些基础属性和案例使用 还有事件、指令、生命周期钩子和组件的使用 难理解的地方都用了图片展示
【前端开发---Vue2】史上最详细的Vue入门教程(一)
共同学习，共同成长
05-04 3615
欢迎大家持续关注【史上最详细的Vue2入门教程】系列文章，后面会持续更新！第一篇我们先来学习vue的基本概念、插值表达式、开发者工具安装、vue响应式、常用指令等等。
vue2 基础入门
ClearloveYt的博客
07-03 2981
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
vue3基础语法学习文档
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板...这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值