您现在的位置是:网站首页> 内容页

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

  • www.lzyq88.com
  • 2019-05-08
  • 303人已阅读
简介我们创建一个项目这个项目我们细说Vue。一.如何在项目中添加模块我们通过npm进行安装模块。首先我们通过cmd.execd进入你的项目根目录必须存在package.json文件

我们创建一个项目这个项目我们细说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: "<App/>"})

二.程序员典型开场白“HelloWorld”

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

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

<template> <div id="app" > <h1>{{text}}</h1> </div></template><script> export default{ name :"app" data(){ return{ text:"helloVue" } } }</script>

  

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

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

数据是这样的:

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

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

<div v-for="stu in stus" :key="stu"> <h4>{{stu.name}}</h4> </div>

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

<div v-for="(stuindex) in stus" :key="stu"> <h4>{{index}} {{stu.name}}</h4> </div>

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

<tr v-for="(pattr) in person" :key="p"> <td>{{attr}}</td> <td>{{p}}</td> </tr>person:{ name:"张三" gender:"男" age:30 height:170 weight:200 }

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

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

<div v-for="(stuindex) in stus" :key="stu"> <h4>这是第{{index}}个学生</h4> <table > <tr v-for="(pattr) in stu" :key="p"> <td>{{attr}} {{stu.name}}</td> </tr> </table> </div>

四.vue的view-model

<input type="text" v-model="user.name"> <h4>{{user.name}}</h4>

user:{ name:"" pwd:""}

五.@Click事件驱动

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

 

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

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

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

传入值

 

如果不传入

六.v-if方法

<h3 v-if="age<16">少年</h3> <h3 v-else-if="age<30">青年</h3> <h3 v-else-if="50">中年</h3> <h3 v-else>老年</h3>age:23

七.v-show

<h3 v-show="age<30">小于30岁</h3> <h3 v-show="age>30">大于30岁</h3>

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

 

 结语:希望大家学的开心有什么问题在下方留言觉得有用的话点个推荐吧!

 

文章评论

Top