松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vue轻松入门,一起学起来!

Vue轻松入门,一起学起来!

迦娜王
3年前Vue
474 0 0

https://blog.csdn.net/q3254421/article/details/83146593

我们创建一个项目,这个项目我们细说Vue。

一.如何在项目中添加模块

我们通过npm 进行 安装 模块。

首先我们通过cmd.exe cd进入你的项目根目录,必须存在package.json文件,安装完之后就自动引入了。

如何在项目中添加模块呢?我们找到main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from \'vue\'
import App from \'./App\'
//在这里可以引用第三方模块
import \'bootstrap/dist/css/bootstrap.css\'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: \'#app\',
 components: { App },
 template: \'\'
})

二.程序员典型开场白“Hello,World”

vue页面中的样式都有互用性,那么如何让一个webpack的样式具有单一性呢.可以在style标签中添加scoped

…b话少说,让我们看下helloWorld吧。


Vue轻松入门,一起学起来!

data就犹如C#中的参数一样,它是为View做准备的,就犹如MVC一样,这种数据驱动和组件化就叫做MVVM模式

三.绑定复杂数据(集合)

数据是这样的:

data(){
 return{
 text:"hello,Vue",
 stus:[
 {sid:11,name:\'小明11\',age:21},
 {sid:12,name:\'小明12\',age:22},
 {sid:13,name:\'小明13\',age:23},
 {sid:14,name:\'小明14\',age:24},
 {sid:15,name:\'小明15\',age:25},
 {sid:16,name:\'小明16\',age:26},
 {sid:16,name:\'小明16\',age:26},
 ]
 }
 }

我们可以通过vue的v-for去遍历它。

{{stu.name}}

但我们值得思考的是,如何获取下标呢,我们说的并不是sid —序号,我们可以这么搞定

{{index}} {{stu.name}}

Vue轻松入门,一起学起来!

这第二个参数还有一个关键字就是attr我们可以这么做

Vue轻松入门,一起学起来!



{{attr}}


{{p}}



person:{
 name:\'张三\',
 gender:\'男\',
 age:30,
 height:170,
 weight:200,
 }

这样我们就可以知道它的属性名了。

有可能你觉得绑定集合我们已经说完了,聪明的同学应该发现,这样的数据格式非常的整洁,那如果他们的列数不同我们应该怎么办呢?我们可以这么做!

Vue轻松入门,一起学起来!

这是第{{index}}个学生

{{attr}} {{stu.name}}

四.vue的view-model



{{user.name}}

user: { name:\'\', pwd:\'\' }
Vue轻松入门,一起学起来!

五.@Click事件驱动

和winfrom事件驱动类似,vue中事件写在methods中,我们简单的做一下登录功能

Vue轻松入门,一起学起来!

Vue轻松入门,一起学起来!

事件驱动的标识通过@Click触发

 methods:{
 MyLogin(){
 if(this.user.name==="admin"&&this.user.pwd==="123456"){
 alert("登录成功");
 }
 }
 }

值得一提的是,如果方法需要参数,但是通过事件调用的时候没有给传递参数,那么参数的值等于此方法的Dom元素所触发的事件对象。例如button 就等于MouseEvent,在ES6新标准中,方法可以自行定制默认值,如果不传值就是默认值的了!

传入值

Vue轻松入门,一起学起来!

Vue轻松入门,一起学起来!

Vue轻松入门,一起学起来!

如果不传入

Vue轻松入门,一起学起来!

Vue轻松入门,一起学起来!

六.v-if方法

少年

青年

中年

老年

age:23,
Vue轻松入门,一起学起来!

七.v-show

小于30岁

大于30岁

这和if没有什么区别 而且和else的机制不同,show方法只是控制一下style:display:none||block 。。。

0
vue生命周期介绍
上一篇
深度学习 Deep Learning—深度学习常见的应用及学习资源
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top