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

最新推荐文章于 2024-05-04 22:45:34 发布
最新推荐文章于 2024-05-04 22:45:34 发布
阅读量130 收藏
点赞数
分类专栏： 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编程的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的基本标签
weixin_46484970的博客
12-14 3293
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（标签的学习）
Woo_home的博客
09-20 255
不知道Vue的下载的朋友可以看下之前的文章 第一个Vue实例 当我们的网络延迟的时候会直接把我们的插值表达式返回渲染到页面上，所以我们需要使用v-cloak标签 v-cloak标签：（解决插值表达式的闪烁问题） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
2024年Web前端最全vue基础学习总结一(1)，HTML标签之表单标签
最新发布
2401_84433570的博客
05-04 581
如果原始数组被改变，比如使用push()、pop()、shift()、unshift()、splice()、sort()、reverse()都会触发新视图更新，但如果使用ilter()、concat() 和 slice()这几种方法不会改变原始数组，是不会触发视图更新的。属性绑定分为两种，一种是标签自带的属性，一种是自定义属性。从上面代码中我们可以看到如果渲染的是数组，第一个元素是值，第二个元素是下标，如果渲染的是对象，第一个元素是值，第二个元素是属性，第三个元素是下标。这个元素上已经存在的类不会被覆盖。
vuejs学习标签1
qingfeng2556的博客
06-26 262
1\v-cloak解决刷新或者加载出现闪烁（显示变量）2\v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容3\Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，给元素都增加key 后， 就不会复用了，切换类型时键入的内容也会被删除，不过&lt;label＞元素仍然...
【Vue学习记录1】vue入门、基本标签
m0_51252051的博客
03-15 102
1 vue入门 1.1 el:挂载点 - el是用来设置Vue实例挂载（管理)的元素 - Vue会管理el选项命中的元素及其内部的后代元素 - 可以使用其他的选择器,但是建议使用ID选择器 - 可以使用其他的双标签,不能使用HTML和BODY ...
Vue学习：1.V标签综合1
weixin_51416826的博客
04-06 871
实现功能：创建一个图片展示框，配有两个按钮：前后切换。点击任一按钮，相应切换上一张或下一张图片。当显示首张图片时，前向切换按钮隐藏；当显示末张图片时，后向切换按钮消失。思路：“点击按钮切换图片”实质是修改当前显示框里图片的索引；“按钮隐藏”可根据当前显示图片在数组中的位置索引使用v-show切换显示还是隐藏。结合使用，提供更复杂的条件逻辑。的布尔值有条件地渲染元素。Vue.js 中常用的。
基于python+django+vue开发的租房管理系统
11-01
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 -------- 功能介绍 平台采用B/S结构，...
基于java+springboot+vue开发的短视频播放系统.zip
11-01
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 功能介绍 --------- 平台采用B/S结构，...
uniapp的基础插件库
02-01
例如：使用uni-card，直接在vue页面中（非app.vue页面）加入标签即可。 没有阴影，不带任何属性的卡片 /uni-card> 其中的各项参数，参考uniapp官网的 组件 ——> 扩展组件 ——> uni-card 部分。
基于python+django+vue开发的外卖点餐网站 - 毕业设计 - 课程设计
11-01
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 ------------------------------- 该系统是基于python+django开发的外卖点餐系统。适用场景：大学生、课程作业、毕业...
基于python+django+vue搭建的视频点播平台 - 毕业设计 - 课程设计
11-01
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 -------- 平台采用B/S结构，后端采用...
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
vue入门知识，vue标签
eriz程序之路
10-30 572
技术交流群：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  
一、vue学习之常用标签
码
05-13 983
<!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常用标签，Demo2
qq_51034633的博客
05-07 119
创建一个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 170
一：基本使用 创建基本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 1244
Vue各种标签的使用方法
Vue中常用基础标签
dongdieqian8898的博客
09-17 456
创建一个Vue实例 var vm = new Vue(){ el:'#app', data:{}, methods:{} } 在html中完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
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、付费专栏及课程。

余额充值