Vue入门案例

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

文章目录

Vue入门案例

1.1 新建空的工程文件

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

1.2 新建模块 Module

1.2.1 初始化文件

进入 hello-vue 目录，执行初始化命令 npm init -y。
在这里插入图片描述执行完成后，会在 hello-vue 下生成一个 json 文件
在这里插入图片描述
在这里插入图片描述

1.2.2 安装 vue

安装 vue ：npm install vue --save
全局为-g；局部为-save
在这里插入图片描述

1.2.3 在hello-vue目录新建一个HTML

在这里插入图片描述1. 在hello.html中，我们编写一段简单的代码：
在这里插入图片描述h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。

1.2.4 vue声明式渲染【通过id选中要渲染的页面元素】

VUE入门操作命令手册：https://blog.csdn.net/Xxacker/article/details/104425184

然后我们通过Vue进行渲染：

<body>
    <div id="app">
        <h2>{{name}}，非常帅！！！</h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el:"#app", // el即element，该vue实例要渲染的页面元素
        data:{ // 渲染页面需要的数据
            name: "峰哥"
        }
    });

</script>
  • 首先通过 new Vue()来创建Vue实例
  • 然后构造函数接收一个对象，对象中有一些属性：
    • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
    • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
      • name：这里我们指定了一个name属性
  • 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

1.2.5 双向绑定 【通过v-model与num】

我们对刚才的案例进行简单修改：

<body>
    <div id="app">
        <input type="text" v-model="num">
        <h2>
            {{name}}，非常帅！！！有{{num}}位女神为他着迷。
        </h2>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element，该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "峰哥",
            num: 5
        }
    });

</script>
  • 我们在data添加了新的属性：num
  • 在页面中有一个input元素，通过v-model与num进行绑定。
  • 同时通过{{num}}在页面输出

1.2.6 事件处理 【用v-on指令绑定点击事件】

我们在页面添加一个按钮：

<!-- 这里引号中也可以是方法名 -->
<button v-on:click="num++">点我</button>
  • 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
  • 普通click是无法直接操作num的。

1.3 生命周期钩子

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

Xxacker的Latitude
关注
专栏目录
vue入门案例
kkagr的博客
04-12 417
vue案例示例案例基本案例v-bind 案例 基本案例 1、初体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <script src="../js/
Vue简单入门及案例
qq_54605990的博客
04-27 1806
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
Vue入门示例，样例
zjl523357813的专栏
02-24 461
介绍几个入门示例，通过不同的实现方式从而体会一下 Vue
【vue前端项目实战案例】Vue仿京东商城App
最新发布
柯晓楠
07-23 1297
本文将介绍一款仿“京东商城”商品信息展示的电商类App。该案例是基于 Vue2.0 + Vue Router + webpack + ES6 等技术栈实现的一款App，很适合初学者进行学习。 项目源码在文章末尾 1 项目概述 项目是一款仿“京东商城”的商品信息展示的App，主要实现了以下功能。 商城首页轮播效果，热销商品展示，公共底部导航。 搜索页面搜索关键词智能提示，保存搜索记录。 商品一级分类与二级分类导航的展示。 商品列表页面的商品展示。 点击商品添加购物车。 购物车页面的商品购买数量加减，统计
Vue——入门案例
zsl2010zsl的专栏
05-06 181
Vue——入门案例
Vue入门案例项目，用于快速搭建Vue2项目
06-06
本项目是一个Vue2的入门案例，旨在帮助开发者快速上手并搭建自己的Vue2项目。 在Vue2中，项目的结构通常包括以下几个关键部分： 1. **`main.js`** - 这是项目的入口文件，一般用来导入Vue库、设置Vue配置以及挂载...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
vue入门级案例
06-12
这个入门级案例通过创建一个购物车应用来教授Vue的基本概念和实际应用。 1. **Vue核心概念**： - **模板语法**：Vue使用双大括号`{{ }}`进行数据绑定，支持条件语句（v-if/v-else）、循环（v-for）、事件处理（v-...
Vue入门-入门案例
压缩疯雷的博客
10-19 143
入门案例声明式渲染条件 v-if循环 v-for处理用户输入 v-on Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： 声明式渲染 文本插值 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 除了文本插值，我们还可以像这样来绑定元素 attribute： &lt
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
一个vue的小例子
06-26
这是一个自己写的比较精简的微信公众号，自己看看吧，
Vue | 入门案例
匿名攻城狮
02-13 420
文章目录一、MVVM思想二、Vue入门案例1.初始化项目2. 声明式渲染+双向绑定3.事件处理三、Vue开发插件介绍安装 Vue3 Snippets代码提示安装vue-devtools方便调试 一、MVVM思想 M： 即 Model， 模型， 包括数据和一些基本操作。 V： 即 View， 视图， 页面渲染结果。 VM： 即 View-Model， 模型与视图间的双向操作（无需开发人员干涉） 在 MVVM 之前， 开发人员从后端获取需要的数据模型， 然后要通过 DOM 操作 Model 渲染到 V
简单的vue入门案例
L-李俊漩的博客
06-04 612
一、 简单入门Hello World案例 二、插值表达式 三、点击事件 四、按键事件 1.如果按下不是 0 - 9 则阻止事件执行 2.打印按下什么按键 五、鼠标事件 1.打印绝对坐标 2.打印相对坐标 3.鼠标mousemove 4. 阻止冒泡(阻止事件的传播) 六、事件修饰符 1.阻止跳转页面v-on:submit.prevent @click == v-on:click...
vue 入门实例
web_q的博客
02-03 453
例一修改opnames的值 : var opnames = new Vue({ el: '#opname', data: { opname: opnames, }, methods: { alertPop: function (name) { this.opname = name; } }})opname
Vue 1.入门案例
weixin_46503633的博客
05-29 173
Vue.js是一个构造数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 Vue将逻辑部分和赋值部分进行分离，使结构更加清晰。 第一个项目的步骤： 打开我们的HBuilder，点击左上角的文件 —>新建 —>项目， 在index.html中编写以下代码： <!DOCTYPE html> <html> <head> <meta chars
vue基础入门案例
weixin_45793819的博客
08-23 216
官网 https://cn.vuejs.org/v2/guide/ 挂载点就是获取jquery 中的数据 ，在页面显示 ，注意不能在body 及单标签里 解析文本 绑定 事假 双加事件 计数器 的思路 v-show 案例 v-if 案例 v-bind 修改属性 案例 对象 图片切换 v-for 增加 减少 常见修饰符 v-on 补充 表单同步 案例 功能 新增技术点 删除 网络应用 格式 akesells 案例.
vue入门基础案例
zhangzhouisme的博客
06-02 1345
炒菜背景 由于最近大家都喜欢vue这道菜，正好也在建站，所以就分享一下vue的原汁原味做法（基于官网的demo说明）。 菜名-八仙过海 如下是8个基础demo，都放在html文件中，可以直接运行，你按照这个就可以完成vue入门。 <!DOCTYPE html> <html> <head> <title>My first Vue app</title> //引入vue支持的包 "https://unpkg.com/vue" <br
Vue入门与基础知识点总结
- 计数器小案例通过v-on:click事件监听器，展示了如何使用methods和简化的语法来处理用户交互。 4. **MVVM模式** - MVVM（Model-View-ViewModel）是一种数据绑定模式，Vue通过数据驱动视图更新。文档解释了MVVM的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值