关于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