Vue
一、vue - 介绍
在前端框架技术中有三大框架：
Angularjs：谷歌公司生产
React：Facebook公司
Vue:尤雨溪作者
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
vuejs的优点
1.易用
已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
2.灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3.高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想
(1) 提供一种方便的工具，使得开发效率得到保证
(2) 保证最小化的DOM操作，使得执行效率得到保证ps：关于虚拟dom，在这里不做赘述，大家可以这样认为，虚拟dom的渲染速度要比我们真实的dom渲染速度快
https://github.com/bailicangdu/vue2-happyfri
vue - 使用
1.创建vue实例对象
<div id="app">
{{ msg }}
</div>
var app = new Vue({
el:'#app',
data:{
msg : '路飞学城'
}
})
<p>{{1==1?'真的':'假的'}}</p>
data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法，它们都有前缀 $，以便与用户定义的属性区分开来
指令系统
指令系统：类似于cmd命令行工具。来操作 数据属性，并展示到DOM上。
v-if v-else-if v-else //为真显示,
v-show
特点： v-if 有更高的切换开销， v-show有更高的初始渲染开销。--->需要频繁的切换使用v-if,否则使用v-show
v-bind ： 绑定属性
v-on @ 绑定事件
v-for
v-html 将一个标签字符串渲染为标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
.box{width: 100px;height: 100px;background-color: red;}
.box2{background-color: green;}
.lunbo ul{width: 180px; overflow: hidden; list-style: none;}
.lunbo ul li{float: left; width: 30px; height: 30px; background-color: purple; margin-left: 5px; line-height: 30px; text-align: center;
color: white;}
</style>
</head>
<body>
<div id="app">
<!-- 插值语法 react{} angular{{}} {% %} <%= %> -->
<h3>{{msg}}</h3>
<h3>{{1>2?"真的":"假的"}}</h3>
<div v-if = 'show'>哈哈哈哈</div>
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
<h3 v-show='iShow' v-bind:title="title">我是一个三级标题</h3>
<button @click='count+=1'>加{{count}}</button>
<div class='lunbo'>
<img :src="currentSrc" @mouseenter='closeTimer' @mouseleave='openTimer' width="100" height="100">
<ul>
<li v-for = "(item,index) in imgArr" @click='currentHandler(item)'>{{index+1}}</li>
</ul>
</div>
<button @click='nextImg'>下一张</button>
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
// 核心思想概念： 数据驱动视图 ，双向的数据绑定
var app = new Vue({
el: "#app", //绑定的标签
data: {
msg:"今天学习vue",
show:true,
iShow:true,
title:"哈哈哈",
imgSrc:"./5.jpg",
time: `页面加载于${new Date().toLocaleString()}`,
count:0,
imgArr:[
{id:1,src:'./1.jpg'},
{id:2,src:'./2.jpg'},
{id:3,src:'./3.jpg'},
{id:4,src:'./4.jpg'}
],
currentSrc:"./1.jpg",
currntIndex:0,
timer:null
},
created(){
// 加载dom之前
// 开启定时器
// 获取cookie session 提前获取出来
this.timer = setInterval(this.nextImg,2000)
},
methods:{
currentHandler(item){
this.currentSrc = item.src
},
nextImg(){
if (this.currntIndex == this.imgArr.length-1){
this.currntIndex=-1
}
this.currntIndex++
this.currentSrc = this.imgArr[this.currntIndex].src
},
closeTimer(){
clearInterval(this.timer)
},
openTimer(){
this.timer = setInterval(this.nextImg,2000)
}
}
})
console.log(app)
console.log(app.$data.msg)
</script>
</body>
</html>
计算属性
{{reverseStr}} //调用get 方法。
var com = new Vue({
el:"#computed",
data:{
msg:"hello world"
},
methods:{
clickHanlder(){
console.log(this.reverseStr); // get
this.reverseStr = "Hello Luffy" // set
}
},
computed:{
// 默认只有 getter 方法
// 实时监听data数据的改变
reverseStr:{
set:function(newValue){
this.msg = newValue;
},
get:function(){
return this.msg.split('').reverse().join('')
}
}
}
})
on-model
v-model只适用在表单控件中 <!-- preevent 可以阻止发送 form 表单，可以 ajax--> <form id='computed' @submit.prevent> <!-- <input type="text" v-model='msg'> --> <!-- <input type="text" v-model.lazy='msg'> <input type="number" v-model.number='msg'> <h3>{{msg}}</h3> <input type="submit" name="" value="提交"> --> <!-- v-model 实现原理- --> <input type="text" v-bind:value='getValue' @input='msgChange'> <h3>{{getValue}}</h3> </form> <script type="text/javascript" src="./vue.min.js"></script> <script type="text/javascript"> var com = new Vue({ el:"#computed", data:{ msg:"123" }, methods:{ msgChange(e){ console.log(e.target.value) this.getValue = e.target.value } // $.ajax() xmlhttpRequest axios 能做ajax技术 }, computed:{ getValue:{ set:function(newValue){ this.msg = newValue }, get:function(){ return this.msg } } } }) </script>
组件创建
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title></title> </head> <body> <div id="app"> <V_header></V_header> </div> </body> <script src="./vue.min.js"></script> <script> //创建组件 Vue.component('V_header', { data: function () { return {} // 必须要return }, template: `<div class="header"> <div class="w"> <div class="w-l"> <img src="./logo.png"/> </div> <div class="w-r"> <button>登录</button><button>注册</button> </div> </div> </div>` }); var app = new Vue({ el: "#app", data: {}, computed: {}, method: {} }); </script> </html>
浙公网安备 33010602011771号