Vue轻松入门,一起学起来!
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吧。
{{text}}

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}}

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

person:{ name:\'张三\', gender:\'男\', age:30, height:170, weight:200, } {{attr}} {{p}}
这样我们就可以知道它的属性名了。
有可能你觉得绑定集合我们已经说完了,聪明的同学应该发现,这样的数据格式非常的整洁,那如果他们的列数不同我们应该怎么办呢?我们可以这么做!

这是第{{index}}个学生
{{attr}} {{stu.name}}
四.vue的view-model
{{user.name}}
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方法
少年
青年
中年
老年
age:23,

七.v-show
小于30岁
大于30岁
这和if没有什么区别 而且和else的机制不同,show方法只是控制一下style:display:none||block 。。。