Vue基本使用
Vue
Vue是遵循MVVW架构模式实现的前端框架javascript
npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.jshtml
MVVW架构 Model数据 View模板 ViewModel处理数据前端
ES6的经常使用语法：
变量的定义，var，let，constvue
- Var 变量的提高，函数做用域 全局做用域，从新定义不会报错，能够从新赋值
- let 块级做用域 { }，从新定意会报错，能够从新赋值
- const 定义不可修改的常量，不能够从新赋值
箭头函数的this取决于当前的上下文环境：相似于python的匿名函数java
this指当前函数最近的调用者，距离最近的调用者python
解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]es6
let obj = {
a:1,
b:2
};
let hobby = ["吹牛", "特斯拉", "三里屯"];
let {a,b} = obj;
let [hobby1,hobby2,hobby3] = hobby;
console.log(a);
console.log(b);
console.log(hobby1);
console.log(hobby2);
console.log(hobby3);
Vue的核心思想是数据驱动视图
Vue的经常使用指令
v-text：获取文本内容npm
v-html：获取html内容数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-text="name"></h2>
<h3 v-text="age"></h3>
<div v-html="hobby"></div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
name:"PDD",
age:18,
hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>"
}
});
</script>
</body>
</html>
v-for：循环获取数组浏览器
v-for：循环获取字典
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>
<li v-for="(item,index) in one" :key="index">
{{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
course_list:["classname","teacher","student"],
one:[{name:"eric",age:"18",hobby:"music"},
{name:"bob",age:"18",hobby:"dance"}]
}
})
</script>
</body>
</html>
v-bind：自定制显示样式，动态绑定属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_app{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{my_app:is_show}">
</div>
<img :src="my_src" alt=""> <!-- v-bind: 能够简写为 : -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{
is_show:true, //true表示显示style样式，false不显示style样式
my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg"
}
})
</script>
</body>
</html>
v-on@事件名：事件绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-on@click只会执行一次，是在第一次进入页面的时候，@click会循环执行 -->
<button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">
点击弹窗
</button>
<!-- <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave"> 繁琐写法-->
<!-- 点击弹窗 -->
<!-- </button> -->
</div>
<script>
const app = new Vue({
el:"#app",
data:{},
methods:{
my_click:function(x){
alert("luke" + x)
},
my_enter:function(){
console.log("鼠标移入事件")
},
my_leave:function(){
console.log("鼠标移出事件")
}
}
})
</script>
</body>
</html>
v-if：条件判断
v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="role == 'admin' ">管理员你好</div>
<div v-else-if="role == 'hr' ">查看简历</div>
<div v-else>没有权限</div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
role:"admin"
},
methods:{}
})
</script>
</body>
</html>
v-show：布尔值类型判断
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="admin">管理员你好</div>
<div v-show="hr">查看简历</div>
<div v-show="others">没有权限</div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
admin:true,
hr:false,
others:false,
},
methods:{}
})
</script>
</body>
</html>
综合案例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="admin">管理员你好</div>
<div v-show="hr">查看简历</div>
<div v-show="others">没有权限</div>
<button @click="my_click">点击显示或隐藏</button>
<div v-show="is_show">hello</div>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
admin:true,
hr:false,
others:false,
is_show:false
},
methods:{
my_click:function(){
this.is_show=!this.is_show
}
}
})
</script>
</body>
</html>
v-model：获取数据，标签的属性设置 ，获取其属性值，用户信息等，例如input，select等
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
{{username}}
<hr>
<textarea type="text" cols="30" rows="10" v-model="article">
{{article}}
</textarea>
<hr>
<select name="" v-model="choices">
<option value="1">阿萨德</option>
<option value="2">主线程</option>
<option value="3">权威</option>
</select>
{{choices}}
<hr>
<select name="" v-model="choices_multiple" multiple>
<option value="1">阿萨德</option>
<option value="2">主线程</option>
<option value="3">权威</option>
</select>
{{choices_multiple}}
</div>
<script>
const app = new Vue({
el:"#app",
data:{
username:"1234",
article:"123456",
choices:"",
choices_multiple:['1']
},
methods:{}
})
</script>
</body>
</html>
v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="username">
{{username}}
<hr>
<!-- 前端默认只显示一个空格，pre使数据原始化展现 -->
<input type="text" v-model.lazy="username">
<pre>{{username}}</pre>
<hr>
<!-- -->
<input type="text" v-model.lazy.trim="username_trim">
<pre>{{username_trim}}</pre>
<hr>
<input type="text" v-model.lazy.number="article">
{{article}}
{{typeof article}}
</div>
<script>
const app = new Vue({
el:"#app",
data:{
username:"1234",
username_trim:"1234",
article:"123456"
},
methods:{}
})
</script>
</body>
</html>
自定义指令
v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.my_box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div class="my_box" v-pin.right.top="pinned"></div>
</div>
<script>
Vue.directive("pin",function(el,binding){
console.log(el); //指令的标签元素
console.log(binding); //指令的全部信息
let adr = binding.modifiers;
if(binding.value){
//定位到浏览器的右下角
el.style.position = "fixed";
// el.style.right='0';
// el.style.bottom='0';
//指令修饰符定位
for (let posi in adr){
el.style[posi]=0;
}
}else{
el.style.position = "static";
}
});
const app = new Vue({
el:"#app",
data:{
pinned:true
}
})
</script>
</body>
</html>
方法集合
v-text v-html v-for v-if v-else-if v-else v-bind 绑定属性 v-on 绑定事件 v-show display v-model 数据双向绑定 input textarea select 指令修饰符 .lazy .number .trim 自定义指令 Vue.directive（'指令名'，function(el,参数binding){ }） el 绑定指令的标签元素 binding 指令的全部信息组成的对象 value 指令绑定数据的值 modifiers 指令修饰符组成的对象
相关文章
- 1. Vue基本使用
- 2. vue-router 基本使用
- 3. Vue的基本使用
- 4. 2. Vue 的基本使用
- 5. vue-router基本使用
- 6. vue-svgicon基本使用
- 7. vue 组件基本使用
- 8. 0一、Vue-基本使用
- 9. vue的基本使用
- 10. vue-router 的基本使用
- 更多相关文章...
- • Redis基本安装和使用 - Redis教程
- • Lua 基本语法 - Lua 教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Vue基本使用
- 2. vue-router 基本使用
- 3. Vue的基本使用
- 4. 2. Vue 的基本使用
- 5. vue-router基本使用
- 6. vue-svgicon基本使用
- 7. vue 组件基本使用
- 8. 0一、Vue-基本使用
- 9. vue的基本使用
- 10. vue-router 的基本使用