Vue快速入门

已于 2023-10-09 15:58:41 修改
阅读量185 收藏
点赞数
分类专栏： 跟着黑马学javaweb 文章标签： vue.js 前端 javascript
于 2023-07-06 15:50:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44761778/article/details/131578415
版权

vue

.js文件准备好
新建js文件复制

vue快速入门

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue快速入门</title>
  <script src="Vue.js"></script>
</head>
<body >
<div id="app">
  <input type="text" v-model="message">
  {{message}}//差值表达式 内容可以是:变量 三元运算符 函数调用 算术运算
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",
      data:{
        message:"hello"
      }
    }
  )
</script>
</html>

Vue指令 v-bind和v-model

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue指令 v-bind和v-model</title>
  <script src="Vue.js"></script>
</head>
<body >
<div id="app">
  <a v-bind:href="url">链接1</a>
  <a :href="url">链接2</a> //v-bind 为HTML标签绑定属性值，如href css 可以省略
  <input type="text" v-model="url"> //v-model在表单元素上创建双向数据绑定 绑定的url必须要在数据模型中定义
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",
      data:{
       url:'https://www.baidu.com'
      }
    }
  )
</script>
</html>

vue指令 v-on

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue指令 v-on</title>
  <script src="Vue.js"></script>
</head>
<body >
<div id="app">
 <input type="button" value="点我" v-on:click="handle()">
  <input type="button" value="点我" @click="handle()">
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",
      data:{

      },
      methods:{
        handle:function () {
          alert("莫挨老子")
        }
      }
    }
  )
</script>
</html>

vue指令v-if v-show

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue指令v-if v-show</title>
  <script src="Vue.js"></script>
</head>
<body >
//v-if 条件性的渲染某种元素，条件成立则渲染
//v-show 根据条件渲染元素，只是display属性值不同
<div id="app">
  年龄<input type="text" v-model="age">是:
  <span v-if="age<=18">小鲜肉</span>
  <span v-else-if="age>18 && age<35">老腊肉</span>
  <span v-else>半截入土</span>

  <br><br><br>
  年龄<input type="text" v-model="age">是:
  <span v-show="age<=18">小鲜肉</span>
  <span v-show="age>18 && age<35">老腊肉</span>
  <span v-show=" age>=35">半截入土</span>
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",//vue接管区域
      data:{
        age:20,
      }
    }
  )
</script>
</html>

vue指令 v-for

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue指令 v-for</title>
  <script src="Vue.js"></script>
</head>
<body >
<div id="app">
  <div v-for="(array,index) in arrays">{{index+1}}:{{array}}</div>
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",//vue接管区域
      data:{
        arrays:["牛","鬼",'蛇','神','魔']
      }
    }
  )
</script>
</html>

vue表格的渲染

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue表格的渲染</title>
  <script src="Vue.js"></script>
</head>
<body >
<div id="app">
  <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>成绩</th>
      <th>等级</th>
    </tr>
    <tr align="center" v-for="(user,index) in users">
      <td>{{index+1}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>
        <span v-if="user.gender=== 1">男</span>
        <span v-if="user.gender=== 2">女</span>
      </td>
      <td>{{user.score}}</td>
      <td>
        <span v-if="user.score>=85">优秀</span>
        <span v-else-if="user.score>=60">及格</span>
        <span style="color: red" v-else>不及格</span>
      </td>
    </tr>
  </table>
</div>
</body>
<script>
  new Vue(
    {
      el:"#app",//vue接管区域
      data:{
        users:[{
          name:"Tom",
          age:20,
          gender:1,
          score:78
        },{
          name:"Rose",
          age:18,
          gender:2,
          score:86
        },{
          name:"Jerry",
          age:26,
          gender:1,
          score:90
        },{
          name:"Tony",
          age:30,
          gender:1,
          score:52
        }]
      }
    }
  )
</script>
</html>
飞花落雨中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
Vue快速入门使用示例附录
03-10
教程资源
vue快速入门
m0_46623754的博客
09-09 1101
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们。在子组件中定义函数，函数的具体实现调用父组件的实现，并在子组件中调用这些函数。指令的 职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
VUE 快速入门
qq_55624813的博客
11-04 1401
目录 VUE 简介 什么是VUE? 什么场景使用VUE？ VUE 快速入门 官方js文件下载 业务及代码实现 总结(Summary) VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 可以将其理解为已经包含部分核心功能的半成品代码，缺少个性化定制，主要用于避免重复编码实现。 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如:
Vue 快速入门
m0_59392076的博客
05-17 227
Vue快速入门 目录 一、Vue指令和参数 二、v-for条件指令 三、v-model指令 四、v-on和v-bind指令 五、component组件 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue指令和参数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>⼩滴课堂vue快速⼊⻔</title> ..
vue快速入门文档
jl15988
03-03 693
快速的学习vue，不懂的地方也可以向我提问，有错误的地方也请及时指正。
VUE快速入门手册
码字不易，大家的支持就是我的坚持下去的动力
09-23 2274
Vue介绍VUE：vue.js是一个构件数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。MVVM：MVVM是model - view - viewModel的缩写，它本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）。
一篇文章，Vue快速入门
热门推荐
cV展示的学习园
06-24 5万+
① Vue概述及第一个Vue程序(Hello World) 1.1 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的
Ant Design Vue快速入门教程
dasfa11的博客
11-04 1万+
Ant Design Vue Ant Design是蚂蚁金服出品的一款前端UI库，官方的介绍是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。 环境node.js webpack vscode npm //安装vue脚手架和ant design vue npm install -g @vue/cli npm i --save ant-design-vue //创建一个vue demo vue create an
Vue快速入门-快速掌握Vue
weixin_52112756的博客
01-20 1679
Vue快速入门-快速掌握Vue 1. 简介 2. Vue—Hello World 3. 指令 4. 计算属性和侦听器 5. 组件化基础 6. 生命周期和钩子函数 7. 使用Vue脚手架进行模块化开发 1、简介 Vue (读音 /vju/，类似于 view) 是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。 是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。 MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。 1.2、MVVM编程思想 MVV
Vue2快速入门
汤键的博客
12-13 532
Vue2快速入门
Vue快速入门.docx
06-20
Vue快速入门
vue快速入门package.rar
04-06
vue项目代码（计数器、记事本、天知道、图片切换、悦听音乐播放器）
vue小白入门教程
08-27
vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 383
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 278
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
vue中的事件
最新发布
weixin_43390711的博客
05-16 46
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 435
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
如何快速入门vue3
02-06
学习 Vue 3 需要具备一定的 JavaScript 基础。如果您对 JavaScript 还不熟悉，可以先学习 JavaScript 基础知识。 一旦您对 JavaScript 有了基本的了解，就可以开始学习 Vue 3 了。 1. 安装 Vue 3 首先，您需要在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值