一、Vue简介
- 一套构建用户界面的渐进式框架。
- 只关注视图层， 采用自底向上增量开发的设计。
- 目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.vue安装
两种方式：
- 前端引入：下载vue.js文件，通过
<script>标签引入到html文件中 - 命令行安装
$ cnpm install vue（cnpm：淘宝npm镜像）
vue-cli创建项目参考：vue-cli脚手架项目创建
2.vue项目目录结构解析
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。 里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 |
| App.vue | 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 |
| main.js | 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
二、常见指令
| 指令 | 说明 |
|---|---|
| v-show | 标签是否显示 |
| v-html | 输出html代码 |
| v-text | 输出文本 |
| v-bind | 绑定属性 |
| v-on | 绑定事件 |
| v-model | 绑定变量 |
| v-for | 循环 |
| v-if v-else | 条件判断 |
| v-pre | 跳过这个元素 |
| v-once | 只执行一次 |
| v-cloak | 解决初始化慢导致页面抖动 |
- 数据绑定
{ {...}}
<!-- {
{}} -->
<div id="app">
<p>{
{message}}</p> <!-- {
{}} 数据渲染 -> 文本插值 -->
<p>{
{info}}</p>
</div>
<script>
new Vue({
el:'#app', //将vue对象与选择器进行绑定
data:{
//绑定的变量的值
message:'第一个vue程序',
info:'大家好'
}
})
</script>
- 输出文本/html标签：
v-text,v-html
<!-- v-text,v-html -->
<div id="it">
<div v-text='x'></div>
<input type="checkbox" >a
<input type="checkbox" >b
<input type="checkbox" >c
<input type="checkbox" @click='qita'>other
<br><br>
<div v-html='h' v-show='t'></div>
</div>
<script>
let vt=new Vue({
el:'#it',
data:{
t:false,
h:'<textarea></textarea>', //输出html代码,页面显示该标签
x:'你好'
},
methods:{
qita:function(){
this.t=!this.t
}
}
})
</script>
- 标签是否显示：
v-show="false/true"
<!-- v-show -->
<div id="open">
<p>你好</p>
<p v-show='temp'>射雕</p>
<p v-show='ok'>无效</p>
</div>
<script>
let vm=new Vue({
el:'#open',
data:{
temp:true,
ok:false
}
})
// 设置定时器
window.setInterval(function(){
vm.temp=!vm.temp
},1000)
</script>
v-if,v-show的区别：
- v-if底层待用appendchild实现，v-show通过样式的display控制是否显示
- 加载性能： v-if>v-show
- 切换开销：v-show>v-if
- v-if是惰性的，真正的条件渲染，会确保在切换过程中条件块内的监听事件器和子组件适当地被销毁和重建
- v-show也是惰性的，如果在初始渲染条件为假时，什么都不做，直到条件为真，才开始渲染
- 条件判断：
v-if
<!-- v-if -->
<div id="pan">
<div v-if="role=='jock'">
<h1>欢迎jock</h1>
</div>
<div v-else-if="role=='rose'">
<h1>欢迎rose</h1>
</div>
<div v-else>
<h1>~~</h1>
</div>
</div>
<script>
new Vue({
el:'#pan',
data:{
role:'rose'
}
})
</script>
- 循环输出：
v-for
<!-- v-for -->
<div id="for">
<ul>
<li v-for='(item,index) in arr'>{
{index}}:{
{item}}</li>
</ul>
<ul>
<li v-for='(item,key) in obj'>{
{key}}:{
{item}}</li>
</ul>
<table border='1'>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for='item in objs'>
<td>{
{item.id}}</td>
<td>{
{item.name}}</td>
<td>{
{item.sex}}</td>
<td>{
{item.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#for',
data:{
arr:['jennie','rose','lisa','jisoo'],
obj:{
a:'jack',b:'lose',c:'join'},
objs:[
{
id:01,
name:'张三',
sex:'男',
age:12
},
{
id:02,
name:'李四',
sex:'男',
age:14
},
{
id:03,
name:'王五',
sex:'男',
age:13
},
{
id:04,
name:'赵六',
sex:'男',
age:11
}
]
}
})
</script>
- 绑定属性/事件
v-bind v-on
<!-- v-bind v-on -->
<style>
.info{
color:aquamarine
}
</style>
<div id="bin">
<a v-bind:href='link' v-bind:class='{info:flag}' v-on="{mouseenter:ok,mouseleave:no,click:myclick}">baidu</a>
<!--简写： <a :href='link' :class='{info:flag}'>baidu</a> -->
</div>
<script>
new Vue({
el:'#bin',
data:{
link:'http://www.baidu.com',
flag:true
},
methods:{
ok:function(){
console.log('鼠标进入')
},
no:function(){
console.log('鼠标移出')
},
myclick:function(){
console.log('跳转百度链接')
}
}
})
</script>
- 双向交互获取值
v-model
<!-- v-model 双向交互，获取值-->
<div id="model">
<input type="radio" v-model='gender' value='男'>男
<input type="radio" v-model='gender' value='女'>女
<br>
性别：{
{gender}}
<br><br>
<p>请选择：</p>
<select v-model='girlfriends'>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<br>
选择的是：{
{girlfriends}}
<br>
<br>
<textarea v-model='text'></textarea>
<br>
{
{text}}
</div>
<script>
new Vue({
el:'#model',
data:{
gender:'',
girlfriends:'',
text:'红红火火恍恍惚惚'
}
})
</script>
- 只执行一次：
v-once
<!-- v-once -->
<div id="once">
<input type="text" v-model='opt'>
<br>
<p>{
{opt}}</p>
<p v-once>{
{opt}}</p>
</div>
<script>
new Vue({
el:'#once',
data:{
opt:'grv'
}
})
</script>
- 跳过这个标签编译：
v-pre
<!-- v-pre 跳过这个标签的编译-->
<div id="pre">
<p v-pre>{
{mes}}</p>
</div>
<script>
new Vue({
el:'#pre',
data:{
mes:'这个标签会被跳过编译，浏览器不会有它'
}
})
</script>
三、注册指令
1.注册全局指令：
<!-- Vue.directive({}) 注册全局指令 -->
<div id="dir">
<p>页面载入时，input标签自动获得焦点</p>
<input type="text" v-focus> <!-- v-focus是自己注册的指令 -->
</div>
<script>
Vue.directive('focus',{
inserted:function(el){
//inserted 表示当指定的元素插入到其父元素使执行这个函数
el.focus() //el 表示被绑定的对象，使被绑定的对象获得焦点
}
})
new Vue({
el:'#dir'
})
</script>
2.注册局部指令
<!-- directives:{} 注册局部指令 -->
<div id="dirs">
<input type="text" v-focu>
</div>
<script>
new Vue({
el:'#dirs',
directives:{
focu:{
inserted:function(el){
el.focus()
}
}
}
})
</script>