vue基础标签学习（共7小部分）

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

1 helloworld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
message:'hi first Vue',
}
})
</script>

</body>
</html>

2vue之 v-if v-else v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>vue之 v-if v-else v-show</title>
</head>
<body>
    <h1>vue之 v-if v-else v-show</h1>
    <hr>
    <div id="app">
    	<div v-if="islogin">登录成功</div>
    	<div v-else>登录失败</div>
        {{message}}
        <div v-show="isshow">vshow true时展示</div>
    </div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
islogin:true,
isshow:true,
message:'Welcom to  Vue',
}
})
</script>

</body>
</html>

3 vue之v-for

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    
  </head>
<body>
  <div id='app'>
    <!--v-for循环普通数组-->
    	<ul><li v-for="(item,i) in list">序号{{i}}值是{{item}}</li></ul>
    	{{computed.sortItem}}
    <br/>
    <!--v-for循环对象数组-->
    	<ul><li v-for="(usera,i) in listObj"> Num{{usera.id}}姓名是{{usera.name}}</li></ul>
    <br/>
    <!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
<!--     <p v-for="(va,ke) in user">--键是--{{ke}}  --值是--{{va}}</p> -->
    <p v-for="(a,b) in user" >键是{{a}}值是{{b}}   </p>
    
    
    <br/>
    <!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
    <!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<!--     <p v-for="count in 10">这是第{{count}}次循环</p> -->
    <p v-for="count in 8">这是第{{count}}次循环</p>
  </div>
  <script>
  var vm = new Vue({
    el:'#app',
    data:{
      list:[100,88,23,4,52,6],
      computed:{
      sortItem:function(){
      return this.list.sort();
      }
      },
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ],
      
      user:{
        id:1,
        name:'托尼.贾',
        gender:'男'
      }
    }
  });
  function sortnub(a,b){
  return a-b;
  }
</script>
</body>

4 vue之v-text v-html  和绑定onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>v-text and v-html  and onclick事件</title>
</head>
<body>
    <h1>v-text and v-html</h1>
    <hr>
    <div id="app">
        {{message}}
        <span v-html="message"></span>
        <br/><br/><br/>
        得分{{count}}
        <button v-on:click="jiafen" >加分</button>
        <button @click="jianfen" >减分</button>
        <input type="text" v-model="secondcount"  v-on:keyup.enter="yejia" />
    </div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
count:1,	
secondcount:2,
message:'hi first Vue<a href="http://www.baidu.com">baidu</a>',
},
methods:{
jiafen:function(){
return this.count++;
},
jianfen:function(){
return this.count--;
},
yejia:function(){
this.count=this.count+this.secondcount;
}

}
})	
</script>

</body>
</html>

5 vue之v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>v-model</title>
</head>
<body>
    <h1>v-model </h1>
    <hr>
    <div id="app">
        {{message}}<br/>
                <input type="text"  v-model="message">
        
        <input type="text"  v-model.lazy="message">
        <input type="text"  v-model.number="message">
        <input type="text"  v-model.trim="message">
        <p>文本域绑定
        <textarea rows="" cols="" v-model="message"></textarea>
        </p>
        <p>
        多选框绑定
        <input type="checkbox"  v-model="ist">
        <label for="aaa">{{ist}}</label>
        </p>
        <p>多选绑定值
        <input type="checkbox"  value="pang"  v-model="name">
        <input type="checkbox"  value="dapang"  v-model="name">
        <input type="checkbox"  value="xiaopang"  v-model="name">
        {{name}}
        </p>
        <p>单选按钮绑定
        <input type="radio" v-model="sex" value="man">
        <input type="radio" v-model="sex" value="woman">
        {{sex}}
        
        </p>
    </div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
sex:'man',
message:'hi first Vue',
ist:false,
name:[]
}
})
</script>

</body>
</html>

6 vue之v-bind

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
	src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<title>v-bind</title>
</head>
<body>
	<h1>v-bind</h1>
	<hr>
	<div id="app">
		{{message}}
		<p>
			<img alt="" v-bind:src="tusrc"> <a :href="myhref">baidu</a>
		</p>
		<span :style="classaaa">hahahahah</span><br>
		 <span :class="classname">hahahahah</span><br>
		<span :class="{classa:istrue}">hahahahah</span> <br>
		<span :class="shuzu">hahahahah</span> <br>
		<span :class="istrue?classA:classB">hahahahah</span>
<input type="checkbox"  v-model="istrue">
	</div>
	<style>
.classa {
	color: red;
}
.classb {
	font-size:30px;
}
</style>
	<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
classA:'classa',classB:'classb',
shuzu:['classa','classb'],
classname:'classa',
istrue:true,
classaaa:'font-size:50px;color:blue;',	
myhref:'http://www.baidu.com',
tusrc:'https://i0.hdslb.com/bfs/face/c81969907b5c286b50d02400e7d54b13595f09bb.jpg@180w_180h_1c.webp',
message:'hi first Vue',
}
})
</script>

</body>
</html>

 7 vue之其他指令v-pre v-cloak v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>other指令v-pre v-cloak v-once </title>          
</head>
<body>
    <h1>other指令v-pre v-cloak v-once</h1>
    <hr>
    <div id="app" v-cloak>
       <p v-once> {{message}}<br></p>{{message}}
       <input type="text" v-model="message">
        <span v-pre>{{message}}</span>
    </div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
message:'hi first Vue',
}
})
</script>

</body>
</html>

leo编程的博客
关注
专栏目录
vue的基本标签
weixin_46484970的博客
12-14 3403
el：挂载点，设置vue实例挂载管理元素，不能使用HTML标签和body标签 data：数据对象 methods：方法 vue实例的作用范围是：vue会管理el选项命中的元素及其内部的后代元素 vue指令： 1、内容绑定，事件绑定。 v-text：设置文本 v-html：设置元素的innerHTML，会解析标签 v-on基础：为元素绑定事件，绑定方法定义再methods属性中，this关键字可以访问定义在data数据中，可以简写成@ 2、显示切换，属性绑定。 v-show：根据表达值的真假，切换元素的显示与
Vue 基础概念学习
Alex的博客
10-24 1610
Vue 基础概念学习
Vue（标签的学习）
Woo_home的博客
09-20 302
不知道Vue的下载的朋友可以看下之前的文章 第一个Vue实例 当我们的网络延迟的时候会直接把我们的插值表达式返回渲染到页面上，所以我们需要使用v-cloak标签 v-cloak标签：（解决插值表达式的闪烁问题） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vuejs学习标签1
qingfeng2556的博客
06-26 273
1\v-cloak解决刷新或者加载出现闪烁（显示变量）2\v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容3\Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，给元素都增加key 后， 就不会复用了，切换类型时键入的内容也会被删除，不过&lt;label＞元素仍然...
【Vue学习记录1】vue入门、基本标签
m0_51252051的博客
03-15 133
1 vue入门 1.1 el:挂载点 - el是用来设置Vue实例挂载（管理)的元素 - Vue会管理el选项命中的元素及其内部的后代元素 - 可以使用其他的选择器,但是建议使用ID选择器 - 可以使用其他的双标签,不能使用HTML和BODY ...
Vue学习：1.V标签综合1
weixin_51416826的博客
04-06 915
实现功能：创建一个图片展示框，配有两个按钮：前后切换。点击任一按钮，相应切换上一张或下一张图片。当显示首张图片时，前向切换按钮隐藏；当显示末张图片时，后向切换按钮消失。思路：“点击按钮切换图片”实质是修改当前显示框里图片的索引；“按钮隐藏”可根据当前显示图片在数组中的位置索引使用v-show切换显示还是隐藏。结合使用，提供更复杂的条件逻辑。的布尔值有条件地渲染元素。Vue.js 中常用的。
Vue-Router基础学习笔记(小结)
10-17
此外，路由配置是Vue-Router中重要的部分，通过定义路由配置对象，我们可以指定各个路由对应的组件，以及子路由、嵌套路由、路由别名和重定向规则等。 路由配置对象通常包含一个routes数组，每个路由规则对应数组中...
vue基础底部路由底部导航栏小案例.zip
11-13
在这个“vue基础底部路由底部导航栏小案例”中，我们将探讨如何在Vue项目中实现底部导航栏，并通过Vue Router进行页面间的路由跳转。 1. **Vue基础知识**： - **组件化**：Vue的核心概念之一是组件系统，它允许将...
vue基础语法练习源码
12-09
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发...过滤器、插件和列表渲染只是Vue众多功能的一小部分，但它们能帮助你构建出交互丰富的Web应用。深入学习和实践这些内容，你将能够自信地应对各种Vue项目挑战。
vue3修改link标签默认icon无效问题详解
10-16
在Vue3中，修改`link`标签默认的`icon`可能会遇到一些问题，尤其是在尝试替换浏览器的导航栏小图标（通常称为favicon）时。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要理解Vue3项目的目录结构。在Vue...
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
vue入门知识，vue标签
eriz程序之路
10-30 592
技术交流群：365814763 创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： &lt;body&gt; &lt;div id="app"&gt;     {{divValue}} &lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt;     var vm  
2024年Web前端最全vue基础学习总结一(1)，HTML标签之表单标签
最新发布
2401_84433570的博客
05-04 599
如果原始数组被改变，比如使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()都会触发新视图更新，但如果使用ilter()、concat() 和 slice()这几种方法不会改变原始数组，是不会触发视图更新的。属性绑定分为两种，一种是标签自带的属性，一种是自定义属性。从上面代码中我们可以看到如果渲染的是数组，第一个元素是值，第二个元素是下标，如果渲染的是对象，第一个元素是值，第二个元素是属性，第三个元素是下标。这个元素上已经存在的类不会被覆盖。
一、vue学习之常用标签
码
05-13 1029
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue常用标签</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">.
vue常用标签，详细讲解
2401_84093019的博客
04-04 1022
button @click=“btnClick(abc, $event)”>按钮一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
Vue常用标签，Demo2
qq_51034633的博客
05-07 142
创建一个Vue实例： var vm = new Vue({ el:'#app', data:{}, methods:{} }) 在html中完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de..
vue01
qq_15513905的博客
07-01 217
一：基本使用 创建基本html项目，引入vue.js，创建一个div，将这个div作为vue的操作对象。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
Vue各种标签的使用方法
weixin_45718431的博客
03-02 1487
Vue各种标签的使用方法
Vue中常用基础标签
dongdieqian8898的博客
09-17 477
创建一个Vue实例 var vm = new Vue(){ el:'#app', data:{}, methods:{} } 在html中完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
深入学习Vue.js的基础代码实践
标签中包含的"vue.js 学习 前端 javascript ecmascript"明确了学习内容的重点在于Vue.js框架，同时强调了这一学习过程离不开对前端技术的基础了解，以及JavaScript和ECMAScript的相关知识。Vue.js作为JavaScript框架...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值