vue入门

历史

vue作者是由雨溪，发布于2014年，是目前使用人数比较多的前端框架，该框架具有以下几个优点：

• JS框架
• 简化DOM操作
• 响应式数据驱动视图

框架和库的区别

• jquery库：->DOM+请求
• 框架：全方位功能齐全

KFC世界里:

• 库相当于是一个套餐
• 框架相当于是一个全家桶

代码上不同:

• 一般使用库的代码，是调用库的某个函数，我们把控库的代码
• 一般使用框架，其框架帮我们运行我们编写好的代码

1、初始化自身行为
2、执行你所编写的代码
3、释放一些资源

vue起步

vue文件介绍

1. 引包

方式很多，我采用cnpm 的方式
在对应文件位置打开终端，执行：cnpm i vue
其他方式详见官方文档

2. 启动

var app = new Vue({el:目的地,template:模板内容,data})
注意1：当template没有内容，则调用目的地，否则template。template的优先级高于el挂载的点
注意2：template当有多个元素的时候，要有一个根元素
注意3：在组件中data必须返回一个函数，函数返回一个对象

插值表达式

{{表达式}}内容可以为：

• 对象（不要连续3个{}），
• 布尔值，
• 字符串，
• 三元表达式

注意：必须在data 这个函数中返回对象中的声明

 var app2 = new Vue({
 el: "#app",
 data() {
     return {
     msg: "我是第一个VUE练习作业",
     isshow: true
     }
 },
 template: `
     

     
{{msg}}
     
{{ {'name':'jack'} }}
     
{{ isshow }}
     
{{ "isshow" }}
     
{{ isshow ? "值为真":"假的" }}
     
 `,
 });

什么是指令

概念：对数据+页面更方便的输出，这个操作叫做指令，用v-xxx表示，在标签上使用

vue中常用的v-指令

v-text

元素的innerText必须是双标签，跟{{}}效果相似，但是这个替换是全替换，如果只要替换部分直接使用{{}}

v-html

元素的innerHtml（一定要有根标签）

v-if

判断是否插入这个元素，相当于元素的销毁和创建
语法：v-if = 字符串，字符串的值在data中声明
值为true时，相当于H5中的appendChild
值为false时，相当于H5中的removeChild
还可以结合 v-elseif v-else使用

v-show

隐藏显示元素，给元素style加上display基于css样式的切换
语法：v-show = 字符串，字符串的值在data中声明
值为true 时，相当于H5中的div.style.display = 'block'
值为false时，相当于H5中的div.style.display = 'none'

v-if和v-show区别

v-if是惰性的，满足条件才加载
v-show不管条件真假都会渲染
总结：v-if有更高的切换开销，v-show有更高的初始渲染开销

v-for使用

循环遍历数组或对象
语法：v-for = "(item,index in arrs)"
v-for 优先级高于v-if 、v-show、v-text、v-html

var app = new Vue({
     el:"#app",
     template:`
     

     
     

点我试试 哈哈哈

我来了