关于vue.js:vue入门

历史

vue作者是由雨溪，公布于2014年，是目前应用人数比拟多的前端框架，该框架具备以下几个长处：

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

框架和库的区别

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

KFC世界里:

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

代码上不同:

• 个别应用库的代码，是调用库的某个函数，咱们把控库的代码
• 个别应用框架，其框架帮咱们运行咱们编写好的代码

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

vue起步

1. 引包

形式很多，我采纳cnpm 的形式
在对应文件地位关上终端，执行：cnpm i vue
其余形式详见官网文档

2. 启动

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

vue文件介绍

{{表达式}}内容能够为：

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

留神：必须在data 这个函数中返回对象中的申明

 var app2 = new Vue({
 el: "#app",
 data() {
     return {
     msg: "我是第一个VUE练习作业",
     isshow: true
     }
 },
 template: `
     <div>
     <div>{{msg}}</div>
     <div>{{ {'name':'jack'} }}</div>
     <div>{{ isshow }}</div>
     <div>{{ "isshow" }}</div>
     <div>{{ isshow ? "值为真":"假的" }}</div>
     </div>
 `,
 });

什么是指令

概念：对数据+页面更不便的输入，这个操作叫做指令，用v-xxx示意，在标签上应用

v-text

元素的innerText必须是双标签，跟{{}}成果类似，然而这个替换是全替换，如果只有替换局部间接应用{{}}

v-html

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

v-if

判断是否插入这个元素，相当于元素的销毁和创立
还能够联合 v-elseif v-else应用

v-show

暗藏显示元素，给元素style加上display:none基于css款式的切换

v-for

循环遍历数组或对象

var app = new Vue({
     el:"#app",
     template:`
     <div>
     <div v-text='msg'></div>
     <div v-html='msg2'></div>
     <button v-on:click='changeBtn'>点我试试</button>
     <div v-if='isShow'>哈哈哈</div>
     <div v-show = 'isShow'>我来了</div>
     <ul >
     <li  v-for="(val,index) in items">{{val.name}}价格为:{{val.price}}</li>
     </ul>
     </div>
     `,
     data(){
         return{
             msg:"这是测试",
             msg2:`<h2>这是v-html测试</h2>`,
             isShow:false,
             items:[{
             name:"苹果汁",price:10
             },{
             name:"番茄汁",price:12
             }]
         }
     },
     methods:{
         changeBtn(){
         this.isShow =  !this.isShow;
         }
     }
 })

v-if和v-show区别

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

v-bind的应用

给元素属性赋值，能够给已存在的属性赋值，input value
也能够给自定义的属性赋值
语法：v-bind:属性名=”常量|变量”
简写： :属性名=”变量名”（也能够是对象{}）
这个例子数据驱动视图变动,data的isShow内容扭转,触发视图中类名变动（当isShow为true时active插入{active:isShow}）,从而扭转界面款式，

 var app = new Vue({
             el:"#app",
             template:`
             <div>
             <div class = "op" v-bind:class ={active:isShow}>给你点色彩看看</div>
             <button v-on:click='changeColor'>点我试试</button></div>
             `,
             data(){
                 return{
                 msg:"这是测试",
                 op:"op",
                 isShow :falsed
                 }
             },
             methods:{
             // this指向template
                 changeColor(){
                 this.isShow =  !this.isShow;
                 }
             }
 })

v-on