vue框架的简单介绍和基础语法(入门必看)
1、Vue的简单介绍
什么是Vue.js？
Vue（读音 /vju:/，发音类似于 view）是一套用于构建用户界面的渐进式的JavaScript框架。
Vue.js的优点：
- 体积小：压缩后只有33k；
- 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
- 双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
- 生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；
为什么要使用Vue.js?
随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。
Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。
和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。
vue init webpack my-project
我们甚至可以使用Vue的单文件组件，它包含了各自的HTML、JavaScript以及带作用域的CSS或SCSS。
2、Vue的初体验
hello {
{name}}
在浏览器中可以看到下面的结果：
下面是，对代码的解释：
{ { }} 用于输出对象属性和函数返回值。
el : 在Vue中表示一个挂载点。
了解：
- el 是用来设置vue实例挂载，（管理）的元素
- vue会管理el选项命中的元素以及内部的后代元素
- 可以使用其他的选择器，但是不建议使用ID选择器
- 可以使用其他的双标签，不能使用HTML和body
data : 数据对象
- vue 中 用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂数据时，遵守js的语法即可
- code
3、Vue的基础语法
3.1、文本输出
普通输出
a.使用`{ {}}方式
hello {
{name}}
b.使用v-text的指令 和普通的{ { }}的用法一样(在这里引入的vue.js文件是我的本地文件，可以换成自己文件所在的本地路径)
代码：
{
{message}}
结果:
上面的结果:
你好，杨柳！！
你好，杨柳！！
下面的结果:
hello
hello
在上面的代码中可以看出：v-text和{ {}}在标签中显示文本数据，数据对象中的数据会被原样输出。都是表达式渲染数据，不解析标签
渲染HTML
c.使用v-html指令
代码:
{
{link}}
结果:
百度一下
百度一下(会跳到网站)
v-html指令可以将HTML标签进行渲染，然后输出。
总结：
v-text和 { {}} 表达式渲染数据，不解析标签；
v-html不仅可以渲染数据，而且可以解析标签；
3.2、条件语句
a.v-if:指令
代码:
{
{message}}
结果:
hello
当条件为 false 时，不会将 h2标签嵌入到网页代码中。
b.v-else-if、v-else的指令(注：在这里我用了两种方式：一种在代码里使用指令；另一种就是我们平常用的if、else if、 else的用法)
优秀
良好
及格
不及格
{
{result}}
c.v-show指令
Hello
v-show是通过display:none CSS样式来控制是否显示的切换操作。
v-if和v-show的区别:
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
3.3、循环语句
遍历数组
基本用法：
代码:
- {
{item}}
- {
{index+1}}.{
{item}}
结果:
why
kobe
html
css
html5
css3
javascript
1.why
2.kobe
3.html
4.css
5.html5
6.css3
7.javascript
v-for遍历数组时有两个参数，参数1为数组的元素值，参数2为元素的下标。
遍历对象
基本用法：
代码:
- {
{item}}
- {
{value}}----{
{key}}
- {
{value}}----{
{key}}----{
{index}}
结果:
html
20
1.7
html----name
20----age
1.7----height
html----name----0
20----age----1
1.7----height----2
v-for 遍历对象时，有3个参数，参数1为对象属性的值（键值），参数2为对象的属性名（键名），参数3为属性在对象中的索引。
3.4、属性绑定
基本用法：
- v-bind 指令的作用就是：为元素绑定属性
- 完整的写法是 v-bind 属性名
- 简写的话直接省掉v-bind ，只保留： 属性名
- 需要动态的增删class建议使用对象的方式
- code
3.5、事件处理
基本用法：
计算：{
{num}}
执行上述代码，当点击按钮时，会对 num 属性做累加操作。
事件函数：
计算：{
{num}}
事件函数传参
计算：{
{num}}
绑定多个事件:
Hello
3.6、数据的双向绑定（表单绑定）
a.文本输入框
内容：{
{val}}
b.文本域
内容：{
{val}}
c.单选按钮
男
女
性别：{
{sex}}
d.复选框
篮球
足球
排球
爱好：{
{hobby}}
e.下拉框
学历：{
{xueli}}
f.修饰符
1)、.lazy 修饰符，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符lazy ，从而转变为在 change 事件中同步：
内容：{
{msg}}
2)、.number 修饰符， 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model来处理输入值：
3)、.trim修饰符， 如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到 v-model上过滤输入：
内容：{
{msg}}
长度：{
{msg.length}}