vue点击按钮切换显示不同内容-ag凯发k8国际
01
什么是vue.js
vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。
看到这里，你就会问了，什么是渐进式？
渐进式就是你可以将vue作为一个项目中的部分组件改用vue实现，不需要引入其他复杂的功能，带来丰富的交互体验。
也可以在一个项目中，更多的的业务逻辑都使用vue，这样vue整个核心库以及其生态系统可以逐步的引用。
02
引入vue的方法
本篇文章因为是主要是为了vue的入门教程，重点主要是vue的整个基础语法上，所以不使用vue-cli，先采用手动引入js的方式，学会vue的基础使用，循环渐进，更加有利于我们的学习！
引入vue.js有三种方式：
1、直接cdn引入
2、下载和引入
开发环境：https://vuejs.org/js/vue.js
生产环境:https://vuejs.org/js/vue.min.js
3、npm安装
后续会有专门的文章介绍webpack和cli的使用。
03
第一个体验
我们在将vue引入之后就可以开始我们第一个vue程序了，体验一下vue的响应式。
运行结果：
解释一下：
app变量就是vue创建的对象，创建对象的时候传入了一些options：{}
el：该属性决定了vue的这个对象挂载在了哪个元素上。上述代码中就是将这个对象挂载在了id为app的这个元素上，这个对象把
{{message}}中所包含的所有的dom都进行了实例化。
data:该属性存储一些数据(数据可以来自于自己定义的，也可以是服务器加载的)。
将data中的文本数据，插入到html的操作，有一个统一的名字——mustache语法(双大括号)。
04
vue的基础语法
2.1插值语法
插值操作就是将mustache语法放入到vue对象中。mustache语法双大括号里面是以变量的形式出现的，也可以是表达式的形式，也可以在一个标签中出现两个mustache，不在大括号中的内容则以原值显示。
结果：
上面有说过，vue是响应式的，响应式就是随着data中变量的改变，页面显示的值也会相应的随之改变。如：我们可以在打开开发者模式，进入console中进行修改count的值
修改完之后，页面的结果变为：
为了不希望它改变，我们可以加入一个vue的指令v-once。
大家可以自己测试一下！
某些时候，我们的数据是一段html代码，但是我们想要显示的是显示解析html代码之后的内容，但是如果我们直接在mustache语法直接显示的话，他展示的为这段html代码，我们可以使用v-html指令，这个指令后面会跟一个string类型，然后将string类型的html解析出来并且渲染。
结果：
将数据显示在页面中，除了mustache语法外，还有一种是使用v-text指令。该指令一般情况下接收的是一个string类型的值。
结果：
接下来我们学习下一个指令v-pre，这个指令会跳过这个元素和子元素的编译过程，显示原本的大括号语法。
2.2绑定属性
前面我们学习的插值语法是将数据插入到模板的内容中，但是除了内容需要动态的决定以外，某些特有的属性我们也希望它可以动态的来绑定，比如:a标签中的href属性。这个时候我们就可以使用v-bind指令。
v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
结果：
点击百度就可以跳转到百度的页面了，大家不妨试一试。
v-bind也可以使用语法糖的形式，也就是它的简写方式
2.3事件监听
在我们开发的过程中，我们通常要和用户进行交互，我们就需要监听用户的操作，比如：点击事件，获取焦点事件，键盘事件等等。在vue中，我们通常使用v-on指令来实现监听事件的功能。
v-on的语法糖@，所以接下来，我们下面的示例代码均使用语法糖形式。
注：其中的methods是vue定义方法的位置，也是vue对象的一个属性。在调用其中的方法的时候，需要注意参数问题：
如果方法中不需要参数，则()可以省略不写。
如果方法需要一个参数，调用方法的时候没有写括号，那么会默认的将原生事件event参数传递进去。
如果方法同时传入了多个参数，那么原生事件event需要手动通过$event传入。
结果：
2.4条件判断
条件判断指令v-if、v-else-if、v-else。
结果：
实现一个小案例：
有两个按钮：点击按钮1，显示一个input元素；点击按钮2，显示另一个input元素。
完成之后，我们在input1中输入值，点击按钮2
结果：
在点击按钮切换的时候，input已经发生了变化，但是里面的值并没有随着按钮的切换而置空，原因是：
vue在进行dom渲染的时候，出于对性能的考虑，会尽可能的复用已经存在的元素，所以在使用v-if的时候，要加上key，并且保证key的值不同，这样就不会出现复用的情况。
v-show和v-if的比较：
两者都是可以决定一个元素的显隐；
v-if条件为false 的时候，不会有对应的元素在dom中;v-show的条件为false时，仅仅是将元素的display属性置为none；
在开发中，如果显隐的切换很频繁，使用v-show；当只有一次，则使用v-if。
2.5循环
vue中使用v-for指令来实现将一组数据的渲染。
结果：
如果你看了ag凯发k8国际官网中关于v-for的介绍，就会发现，在ag凯发k8国际官网的介绍中，建议在使用v-for时，加上key属性，这个是为什么呢？(有兴趣可以去了解一下diff算法),我这里简单的描述一下。
当同一层有很多相同的节点，我们需要在中间添加一个新的节点的时候，比如有1,2,3,4,5五个顺序的节点，现在要在第2个节点之后新加一个节点6，那么diff算法会将3更新为6,4更新为3,5更新为4，再添加一个5节点，这样我们渲染真实dom开销是非常大的，那么为了解决这个问题，我们给每个节点设置一个key来做唯一的表示，这样子就可以正确的识别此节点，那么再添加6节点的时候，只需要找到插入的位置，直接插入新的6节点就好了。
2.6表单双向绑定
vue中使用`v-model`指令来实现了表单元素和数据的双向绑定。
结果：
我们可以很直观的看到显示的结果，当我们input中的数据发生变化时，会将输入的内容传递给message变量，页面中的message也会随之发生改变，所以，通过v-model我们实现了双向绑定。
有人可能会疑问，v-model的双向绑定都是怎么实现的呢？其实v-model就是一种语法糖的表示形式，它包含了两个操作:
将input的value属性通过v-bind来绑定；
通过v-on给input标签添加了input事件(input事件是当input标签中的值发生变化时触发的事件)
接下来，介绍几个有关v-model的修饰符
通常情况下，我们已经知道了，给input标签添加v-model指令之后，数据发生改变，那么data中对应的值也会发生相应的变化。
某些时候我们不想它们自动变化,可以使用lazy修饰符，该修饰符可以在标签失去焦点或者是回车的时候才会更新数据。
通常情况下，我们的输入框都会将输入的内容当成字符串进行处理，但是如果我们希望处理的是数字类型，我们可以使用number修饰符可以让输入框输入的内容自动转为数字类型。
如果在我们输入的内容中前后有许多的空格，通常我们希望可以将这些空格去除，那么可以使用trim修饰符来去除左右两端的空格。
2.7计算属性
通过前面的学习，我们已经知道，通过插值的操作可以对data中的数据在页面进行显示，但是某些时候，我们需要显示的内容可能是通过data中的数据进行一系列操作之后再进行显示的，这个时候我们就可以使用计算属性的方法，计算属性是在computed中，它也是vue对象中的一个属性。
实现一个小案例：
计算小明需要购买课本的总价格
结果：
学会了吧，是不是很简单。其实每个计算属性都有一个getter和一个setter方法。
结果：
我们再来讨论最后一个问题，这个功能我们不仅可以使用计算属性的方法实现，同样的我们也可以通过定义方法来实现，那么两者的区别在哪里呢？我们为什么要使用计算属性的方法，而不使用定义方法来实现呢？
首先，我们在刚才的代码中，我们加上一个gettotalprice方法，然后将计算属性的值和方法的值在页面显示多次
结果：
我们可以看出，计算属性会进行缓存，如果是多次使用计算属性的值，只会调用一次；而方法在每次调用的时候都会进行调用。
通过这个小实验，相信这两个用哪一个你也会学会选择了！
2.8监听属性
在vue中，我们可以使用watch来监听属性的变化。
结果：
结果：
如果监听的对象是一个对象类型的话，那么使用普通的监听是没有效果的，所以有两种方式监听对象：
使用深度监听(监听后的结果值一样)
使用计算属性的方式获取对象中需要监听的属性，进行普通监听
总结
以上是ag凯发k8国际为你收集整理的vue点击按钮切换显示不同内容_邂逅vue的全部内容，希望文章能够帮你解决所遇到的问题。
