vue学习--一步一步来2

最新推荐文章于 2021-12-27 17:25:43 发布
最新推荐文章于 2021-12-27 17:25:43 发布
阅读量124 收藏 1
点赞数
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39349045/article/details/120099409
版权

v-show 如何条件为False，则会对标签增加一个 display=none 的属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>{{msg}}</p>
    <div v-show="showinput">
          <input type="radio" value="man" name="sex">男
          <input type="radio" value="woman" name="sex">女
    </div>
      
    <input type="button" value="hello" @click="clickme">
    <input type="button" value="hello" @click="showinput=!showinput">
  </div>
  
      <script>
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ 
              msg :'小福宝 ',
              showinput:true
              }
                 
                      
          },
          methods: {
            clickme() {
              console.log("我爱你")
            }
                  } 
         

          })
           
      </script>

  
    
</body>
</html>

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

v-if 如果符合条件，该元素才会被加载

在这里插入图片描述

v-bind（标签属性绑定）

全写 v-bin:href

简写 :href

用途:让html元素使用vue的data中定义的数据

<!DOCTYPE html>
<html lang="en">
<head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>{{msg}}</p>
      <div v-if="showinput">
            <input v-bind:value="sex" type="text"  />
            <input :value="sex" type="button"  />
      </div>
    <div v-show="showinput">
          <input type="radio" value="man" name="sex">男
          <input type="radio" value="woman" name="sex">女
    </div>
    <div v-if="showinput">
            <input type="radio" value="man" name="sex">男
            <input type="radio" value="woman" name="sex">女
      </div>
      <div v-else="showinput">
            <input type="text" value="打开" name="sex">
           
      </div>
      
    <input type="button" value="hello" @click="clickme">
    <input type="button" value="男女" @click="showinput=!showinput">
  </div>
  
      <script>
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ 
              msg :'小福宝 ',
              showinput:true,
              sex: '我也不知道',
          button: 'button'
              }
                 
                      
          },
          methods: {
            clickme() {
              console.log("我爱你")
            }
                  } 
         

          })
           
      </script>

  
    
</body>
</html>

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

v-on:click

全写 v-on:click, 缩写 @click

click对应的方法是 methods中的方法

v-model(双向数据保定)

将标签中的value属性与vue中data的参数做出绑定，当一方发生改变，另外一方也会同步变动
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>{{msg}}</p>
      <div v-if="showinput">
            <input v-bind:value="sex" type="text"  />
            <input :value="sex" type="button"  />
      </div>
    <div v-show="showinput">
          <input type="radio" value="man" name="sex">男
          <input type="radio" value="woman" name="sex">女
    </div>
    <div v-if="showinput">
            <input type="radio" value="man" name="sex">男
            <input type="radio" value="woman" name="sex">女
      </div>
      <div v-else="showinput">
            <input type="text" value="打开" name="sex">
           
      </div>
      
    <input type="button" value="hello" @click="clickme">
    <input type="button" value="男女" @click="showinput=!showinput">
    <div  >
            <input  v-model="sexid"type="radio" value="man" name="sex">男
            <input v-model="sexid" type="radio" value="woman" name="sex">女
            <p >{{sexid}}</p>
      </div>
  </div>
      <script>
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ 
              msg :'小福宝 ',
              showinput:true,
              sex: '我也不知道',
          button: 'button',
          sexid:''
              }
                 
                      
          },
          methods: {
            clickme() {
              console.log("我爱你")
            }
                  } 
         

          })
           
      </script>

  
    
</body>
</html>

v-for 循环

v-for可以在标签上添加，将会循环该标签
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>{{msg}}</p>
      <div v-if="showinput">
            <input v-bind:value="sex" type="text"  />
            <input :value="sex" type="button"  />
      </div>
    <div v-show="showinput">
          <input type="radio" value="man" name="sex">男
          <input type="radio" value="woman" name="sex">女
    </div>
    <div v-if="showinput">
            <input type="radio" value="man" name="sex">男
            <input type="radio" value="woman" name="sex">女
      </div>
      <div v-else="showinput">
            <input type="text" value="打开" name="sex">
           
      </div>
      
    <input type="button" value="hello" @click="clickme">
    <input type="button" value="男女" @click="showinput=!showinput">
    <div  >
            <input  v-model="sexid"type="radio" value="man" name="sex">男
            <input v-model="sexid" type="radio" value="woman" name="sex">女
            <p >{{sexid}}</p>
      </div>
      <div>
          <p v-for="(intem,index) in name ">{{intem}},{{index}}</p>
      </div>
  </div>
      <script>
          const vm=new Vue
          ({el:'#app',

          data(){
              return{ 
              msg :'小福宝 ',
              showinput:true,
              sex: '我也不知道',
          button: 'button',
          sexid:'',
          name:['小苗','小李'          ]
              }
                 
                      
          },
          methods: {
            clickme() {
              console.log("我爱你")
            }
                  } 
         

          })
           
      </script>

  
    
</body>
</html>

<div v-for="value in values">
  {{ value }}
</div>

<div v-for="(value,index) in values">
  {{ value }}
</div>

在这里插入图片描述

苗苗大佬
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一步一步学Vue (一)
JerremyZhang的博客
07-19 249
一步一步学Vue (一) 2017-07-19 23:11 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑 　　vue应该是前端主流框架中的集大成者，它吸取了knockout，angular，react设置avalon的经验，支持各种模式写法，入门很简单，从本章开始，会记录学习vue中的点点滴滴，以笔...
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（二）
Alex_Zhao 的博客
09-20 7202
上篇 从零开始一步一步构建 VUE 单页应用（一） 对单页应用做了简单的介绍并创建了一个单页应用的模版。这篇就先来看看这个项目的文件结构，然后再看看要怎么修改才能实现我们自己的页面。
vue学习--一步一步来1
weixin_39349045的博客
09-04 144
你好小福宝页面 <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app">{{msg}}</div> <!-- //所有vue代码会填充到div里面，d
VUE 第一步
wangbinaaa的博客
07-08 126
安装环境 1.安装nodejs 官网下载 https://nodejs.org/en/ 执行安装，选择保存路径后其他都默认 确认安装成功 node -v npm -v 2.安装 cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org 3.安装vue-cli npm install -g @vue/cli 如果卡住不动就用cnpm安装 cnpm install -g @vue/cli 创建项目 cmd进入放项目的文件夹 执行vue
一步一步搭建vue项目
kakaxiD的博客
01-21 516
** 1 安装步骤 ** 1.创建一个目录，我们这里定义为Vue 2.在Vue目录打开dos窗体，输入如下命令：vue create myproject 3.选择自定义 4.先选择要安装的项目，我们这里选择4个 5.选择yes 6.选择SCSS/SASS 7.选择第一个 9.选择自己的配置文件 10.选择no 11.等待下载完成 12.下载完成后，需要安装一下相关插件，进入到“pac...
vue-devtools.zip免费下载
07-13
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。Vue DevTools 是一个专为Vue.js开发者设计的强大浏览器扩展...对于学习和掌握Vue.js的开发者来说，安装并熟悉Vue DevTools是必须的一步。
vue-devtools-chrome
10-15
Vue.js 是一个流行的前端JavaScript框架，它简化了Web应用程序的构建过程，提供了声明式的数据绑定和组件化功能。...对于学习和掌握Vue.js的开发者来说，熟悉和利用Vue Devtools是提升技能的关键一步。
vue学习02-vscode配置vue环境
最新发布
04-02
2. **安装Vue CLI**： 在全局安装Vue CLI，你可以通过VSCode的内置终端（确保以管理员模式运行VSCode）或命令行（也需管理员权限）输入以下命令： ``` npm install -g vue-cli ``` 这会下载并安装Vue CLI，使得...
vue-demo-2
03-15
通过这个"vue-demo-2"项目，你可以学习到如何组织Vue项目、如何利用Vue CLI工具进行开发和构建，以及如何进行基本的游戏开发。这将帮助你进一步理解和掌握Vue.js的实践应用，为今后的前端开发工作打下坚实的基础。
vue-web-bluetooth-api-heart-rate-app:带有Vue.js的Web蓝牙API心率应用
05-09
这一步将安装Vue.js、Vue CLI以及其他可能的项目依赖。命令如下： ``` cd vue-web-bluetooth-api-heart-rate-app npm install ``` 3. **启动服务**：安装完成后，你可以使用Vue CLI的内置服务器来运行项目。这...
vue 一步一步学习搭建基础环境 (一)
yulizi0215的博客
04-08 222
vue 一步一步学习搭建基础环境 (一)
一步一步的实现Vue（一）
romeo12334的博客
05-06 395
“ 这次想要自己学着实现简单版的vue，从而对vue有更加深入的理解。” 推荐一个好用的vscode插件，可以本地快速启动服务器，并运行html文件，且拥有热加载功能：“live server”。 01、看看真正的Vue 首先，我们都知道，当使用 new Vue 的时候，就可以将 html 中的模板{{}}用 data 里面的数据替换，如下： <!DOCTYPE html&g...
教你一步步使用vue创建项目【超详细(^_−)☆】
estrusKing的博客
06-23 1617
工具 Vue CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。 CLI(全称：command-line interface，命令行界面)，在熟记命令的前提下，使用命令行界面往往要较使用图形用户界面的操作速度要快。 Node.js安装 npm安装 首先：先从nodejs.org中下载nodejs node.js 中文网 node.js 外网 找到安装路径 文件 然后双击安装，在安装界面一直Next，直到Finish完成安装。 打开控制命令行程序（CMD）,检查是否正常
vue.js 从菜鸟开始一步一步成大神，vue.js 终极版小白教程
u014404126的博客
12-11 3775
第一节：安装好环境，运行第一个程序，为接下来的学习打好基础啊
用vue-cli 与vuex一步一步搭建一个笔记应用(三)
Daisy花园
05-10 5884
前面我们仅仅只是搭建了一个简单的界面，并没有使用vuex来进行数据管理。 下面我们开始怎么使用vuex，因为我也是初学，所以一边学一边写吧。 vuex有中文文档：其实讲得很清除 https://vuex.vuejs.org/zh-cn第一步 安装vuexcnpm install vuex -g --save-dev 为什么要使用vuex?在vuex文档里写得很清楚，一个vue就是这样的，有dat
不使用vue-cli，一步一步构建Vue项目（小白入门）
热门推荐
前端很忙
03-31 1万+
不使用vue-cli构建项目，vue项目，初学vue项目，简单vue项目
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（一）
Alex_Zhao 的博客
09-20 1万+
最近公司技术 Leader 说要以后要使用 VUE 来构建单页应用，让我先研究下怎么搞。既然接到了任务那就撸起袖子开干吧，由于之前有过使用 VUE 做页面数据绑定，对 VUE 这东西还是很有好感的。于是乎 google 了一堆先行者的文章，看了一圈下来有了一个基本的概念。在我看来，单页应用就是把网页做的跟原生 APP 差不多的形式，没有传统网页那样的有明显的页面跳转，页面切换比较流畅顺滑，用户体验较
【Vue】方法顺序执行
Hit the keyboard hard
12-27 9584
问题提出 虽然Vue中的方法是顺序执行的，但是如果某个方法执行时间很长（比如访问后台数据接口），那后面的方法不会等这个方法执行完就会执行。这说明，同一个方法内可以顺序执行，但是多个方法之间并不能严格控制顺序执行。 解决方案 使用async和await修饰符 async mainMethod(){ await this.orderMethod1() await this.orderMethod2() await this.orderMethod3() } ...
Vue-cli配置+rem实现移动端自适应：三角形面积计算实战
每一步都强调了实践和创新的重要性，强调培养孩子们自主学习和解决问题的能力，同时提供了详细的步骤指导和下载安装教程，确保用户能顺利上手和深入学习。通过这些课程，学生们可以在愉快的互动中提升计算机素养，为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值