Vue基础入门

Vue是什么?

借用官网的介绍:Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面(View)的渐进式MVVM框架。Vue 被设计为可以自底向上逐层应用。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue官方教程网址

使用Vue

   1、我们要使用vue,有两种方式

(1). 一是在咱们的传统项目中使用,通过script标签来引入vue.js的库,这个vue.js的库可以在官网上找到,同时我们还可以通过引入CDN的方式来引入vue的js库,在这里,官方给我们提供了两个版本的CDN

	//开发环境版本,包含了有帮助的命令行警告
	
	//生产环境版本,优化了尺寸和速度
	

(2). 二是使用vue-cli脚手架来搭建一个项目
①、使用脚手架首先需要有node环境,使用 node -v来查看本机node版本
②、然后使用 npm install @vue/cli -g 命令来全局安装 vue-cli 3.x 版本
③、如果需要同时使用vue-cli2.x版本的话,通过 npm install @vue/cli-init -g命令来安装一个桥梁,此时我们就可以同时使用 vue-cli3.xvue-cli2.x

   2、开始 Vue 项目

  1. 我们先不使用 vue-cli 工具来搭建项目,先熟悉一下vue的语法和各种指令,

  2. 首先我们新建一个index.html文件,然后通过script标签引入vue的js文件或者CDN

  3. 
    
    
    	
    	Document
    	
    
    
    	
  4. 首先这个html文件中,我通过script标签引入了vue.js本地文件,并且在body下方的script内部写了这样一个代码

      var app = new Vue({
     		el:'#app'
     })
    
  5. 咱们通过new Vue创建了一个Vue的实例,并且通过el这个属性,将 Id 为 app 的 div 绑定到了这个Vue实例上,让这个Vue实例接管了咱们的这个div元素

  6. 然后,我们来试一试输出一段话

  7. 
         
    {{msg}}
  8. 然后打开这个html文件,我们就可以看到页面上输出了 hello Vue!

  9. 我们来看一看上边的这个代码 首先在script中 我们定义了一个data属性,这个属性对应的是一个对象,而这个对象中有一个叫msg的属性,对应的值为hello Vue!,然后在我们的div模板中,我们使用{{msg}}的方式,调用了这个变量,并在页面上显示出了它所对应的值

  10. data

    data这个属性,保存了我们这个Vue实例上的所有的基本数据
    {{ }} 双花括号是Vue语法中的插值表达式可以将我们Vue实例中的数据渲染到页面上去

  11. 除了差值表达式{{}}以外,我们还可以通过两个Vue的指令来将我们的数据渲然到页面上去,这两个指令就是 v-text 和 v-html

  12. v-text 和 v-html

    首先我们来看看怎么使用这个Vue的指令

    然后我们打开页面可以看到和插值表达式一样的效果,我们的hello Vue! 同样的被渲然到了页面上,然后,我们来看看它们之间有什么区别

    插值表达式{{ }}和v-text与v-html之间的区别

    我们可以试着把msg这个数据,改成一个这样的格式: msg:'

hello Vue!

'
    接着我们打开页面,我们会发现 v-text{{}} 插值表达式输出的是纯字符串 在页面上并没有渲染出 h3 标签
    而v-html正确的解析了 html 标签,这就是他们之间最大的区别,
而且,一般来说,绝不要对用户提供的内容使用v-html,因为它很可能对你的网站造成攻击

而且,在使用vue的指令的时候,我们是可以在指令中输入javascript表达式的,表达式就是 +、-、*、/、三目运算符、以及数组字符串等的方法,
但是,建议不要直接在指令中做复杂的方法调用,或者判断,可以通过后期学习的vue的过滤器和计算属性来实现复杂的运算和方法调用等

13、v-bind 属性绑定
在使用vue的过程中,我们经常会和v-bind打交道,v-bind可以将一个html标签的属性绑定到vue实例上,使其可以使用vue实例中的数据作为属性值,或者在其属性中进行某些运算或判断
举一个最简单的例子

 html:
 
这里是随便写的
js: var app = new Vue({ el:'#app', data:{ content: "myText" } })

按照html的情况来说 ,此时我们的div应该是有一个叫content的class类名,
但是,由于我们使用了v-bind属性绑定,所以,我们会发现,现在的div竟然有一个叫 myText 的class类名,这,就是v-bind属性绑定,就是把原有的html标签属性,绑定到Vue的实例上去,可以使用 Vue 的数据
然后我们在写一点高级的使用方法:

 html:
 
这里是随便写的
js: var app = new Vue({ el:'#app', data:{ flag:true } })

这个时候,我们可以看到,我在div标签上写了一个v-bind:class="{content:flag}"一个对象格式的数据,而在我们的js中,有一个flag布尔值,暂时为true,然后我们打开浏览器, 可以看到在我们的div上绑定了一个content的class类名,
然后,我们回到代码中,将flag的值修改为false,
再次打开浏览器,会发现这个div它现在已经没有这个类名了
这个就是做了一个简单的判断,当条件成立的时候,添加一个class类名,否则删除这个class类名,至于这个class类名的样式,那就是看官您的喜好了

在绑定属性的时候,我们也可以传入一个数组,还是拿class来举例


这个时候,我们打开浏览器,可以看到这个div它加上了 one、two两个类名,而three这个类名由于是false,所以没有添加上,如果想添加上也很简单,只需要把false改为true就可以了
而以上的条件判断等只是为了方便举例,在实际应用中,我们可以写一个返回布尔值的添加表达式, 例如:3>0 返回 true
由于v-bind的常用性,所以vue给我们提供了一个快捷语法
v-bind: 简写为 : 一个冒号,例如:

上例得到的结果是一样的
14、vue的条件渲染 v-if v-show
在vue中,提供了非常便捷的条件渲染方式,当条件成立的时候,显示指定的DOM标签,不成立的时候,不显示指定的DOM标签

 html:
 
这里是随便写的
js: var app = new Vue({ el:'#app', data:{ flag:true } })

此时我们打开浏览器页面上正常显示这个div标签,而当我们把flag改为false的时候,这个div标签就不显示了,打开控制台,我们可以看到这个div标签已经完全消失了
而v-if还可以结合v-else、v-else-if来一起使用
使用方法如下:

 html:
 
这里是条件成立的时候显示的
这里是条件不成立的时候显示的
js: var app = new Vue({ el:'#app', data:{ flag:true } })

二、

	 html:
	 
这里是条件成立的时候显示的
这里是num等于3的时候显示
这里是条件不成立的时候显示的
js: var app = new Vue({ el:'#app', data:{ num:3 } })

v-if 可以单独使用,当条件成立的时候在DOM节点渲染该元素,不成立的时候在DOM节点中不渲染该元素,v-if具有惰性,它会等到条件成立的时候再执行并进行渲染
v-else 必须与v-if组合使用,当v-if的条件不成立时,渲染v-else的元素
v-else-if 必须与v-if组合使用,当v-if的条件不成立时,再次进行判断,是否符合当前if的判断,如果当前条件成立,则渲染当前元素

v-show

 html:
 
这里是条件成立的时候显示的
这里是条件不成立的时候显示的
js: var app = new Vue({ el:'#app', data:{ flag:true } })

此时我们打开浏览器,可以看到在页面上显示了条件成立的那个div,而打开控制台的Element面板,我们可以看到的两个div都被渲然出来了,只不过,条件不成立的那一个添加了一个css样式display:none;所有,才会隐藏

v-show 条件渲染
无论条件成不成立,该元素都会在DOM节点中渲染出来,只不过!!:条件成立的时候该元素显示,条件不成立的时候,该元素display:none;

v-if 和 v-show 的应用场景
如果需求是需要经常切换元素的显示和隐藏,使用v-show得当效率更高,因为v-show只是简单的基于css进行切换
如果你只需要做一次条件判断或者说运行条件很少改变时,使用v-if更加合适,

15、Vue的列表渲染 v-for
在Vue中提供了特别便捷的列表渲染方式,渲染数组的每一项、即为列表渲染
使用方法如下:

 html:
 
  • {{item}}
js: var app = new Vue({ el:'#app', data:{ list: ['苹果','香蕉','梨','橘子','火龙果','桃'] } })

然后打开浏览器,可以看到在浏览器的页面上,正确的渲染出了我们list列表里的每一项数据,而且每一项数据,都是一个 li 标签,说明:v-for指令 使用在需要列表循环渲染的标签上,会遍历列表的每一项、并输出到页面上
在使用 v-for 的时候,我们应该给元素绑定一个 key 值,这个 key 值必须是不重复的,在大部分时候,我们应该使用 id 来作为 key 值,如果没有 id,那么也可以勉强使用 index 下标来作为 key 值,但是不建议这么做
那么,我们对上述的代码再进行一次改变

 html:
 
  • {{item.name}}
js: var app = new Vue({ el:'#app', data:{ list: [ {name:'苹果', id: 1} ,{name:'香蕉', id: 2} ,{name:'梨', id: 3} ,{name:'橘子', id: 4} ,{name:'火龙果', id: 5} ,{name:'桃', id: 6} ] } })

这个时候,我们的代码就比较符合规范,也比较完善了,需要注意的是:
1、key 值必须是独一无二的,一般对于我们前端来说,后台返回的数据中肯定会有一个独一无二的 id,所以我们使用 id 是比较好的
2、v-for可以使用for in 循环遍历,也可以使用for of循环遍历
3、在v-for的条件中 (value,key,index) 第一个是value(内容),第二个是key(对象的属性名,数组的下标),第三个是index(索引值)

16、v-on 和 methods -------- Vue的方法定义及使用
在Vue中,我们所有的方法应该写在methods中:

 html:
 

js: var app = new Vue({ el: '#app', data: { msg: 'hello Vue!', flag: true }, methods: { show: function() { this.flag = !this.flag; } } })

首先,我们在script中的Vue实例上,写了一个methods,然后写了一个show方法,而这个show方法所做的事情,就是将flag的布尔值取反
需要注意的是:在Vue实例当中,我们要调用当前实例上的数据或者方法的时候,我们通过this.属性、this.方法() 来调用,这个是Vue的底层给我们封装好的
然后,我们在html中的button上,写了一个v-on:click=“show()”,这个v-on指令,就是在我们的DOM节点上绑定事件,v-on是绑定事件的指令、click是触发的事件、show是我们在Vue实例中写好的方法
接着,我们打开浏览器,点击按钮,可以看到我们的

hello Vue!

在不停的显示隐藏
在这里,我们使用了 v-on 和 methods ,绑定事件,以及定义事件
而在Vue中,v-on的使用频率也非常高,所以,它同样有自己的简写 @ 符号,写法如下:



17、v-model 数据的双向绑定
在Vue中,为表单元素提供了一种非常便捷的数据获取及修改的方法,就是v-model,它可以使Vue实例中的数据与表单元素的value值绑定起来

 html:
 

{{inputValue}}

js: var app = new Vue({ el: '#app', data: { inputValue: '' } })

然后我们打开浏览器,在input中输入内容,可以看到我们 h1 标签中的内容会随着我们 input 的输入而改变,说明input的 value 发生改变的时候我们 Vue 实例中的 inputValue 也同步发生了改变,这样我们就完成了一个简单的数据同步,然后,我们还可以再深入一些

 html:
 

{{inputValue}}

js: var app = new Vue({ el: '#app', data: { inputValue: '' }, methods: { clearInput: function() { this.inputValue = ''; } } })

然后,打开浏览器,输入是没有问题的,点击 button 按钮,可以看到清空了input,说明事件正常执行,我们在修改了Vue实例上的数据的时候,input的value也同步发生了改变

18、最后,我们一起写一个简单的案例,以便于更清晰的认识Vue的这些指令
Vue基础入门_第1张图片

Vue基础入门_第2张图片

一个简单的添加和删除案例

1、当没有数据的时候显示暂无数据,当有数据的时候显示数据
2、点击添加将input的数据添加到表格当中,并清空input
3、点击删除则删除当前点击的这一个

	
	

商品名称

商品价格

序号 商品名称 商品价格 商品数量 商品小计 操作
{{index+1}} {{item.name}} {{item.price}} {{item.count}} {{item.count*item.price}}
暂无数据

到这里,Vue的基础指令以及基本使用也就差不多了,本文没有讲到的指令可以去Vue的官网上查看、学习框架建议多看多读官网的API,Vue官网的API文档还是比较全面的






结语:感谢您百忙之中点击查看这篇文章,希望你我共同进步

你可能感兴趣的:(Vue,javascript,Vue,javascript,前端框架,MVVM)