初学vue及九大指令
2019-11-30 本文已影响0人
焚心123
1.Vue和其他两大框架的区别：
- Angular 学习成本太高
- React 代码可读性差
- Vue 学习成本较低 很容易上手
**传送门
** https://cn.vuejs.org/v2/guide/comparison.html
2.Vue是什么？
- Vue是一套用于构建用户界面的渐进式框架
"前端框架" - 让程序员脱离自己操作DOM 专注于写逻辑
和操作数据 - Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合
- 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动
3.什么是MVC?
- 是后台的一种软件开发模式，将程序分为三步分：
- M
model 数据 - V
view 视图 - C
controller 控制器 - 我们前端只关心的是视图view
4.MVVM
- mvvm又将MVC中V细分为了三部分：
- M
model 数据 - V
view HTML页面 - VM
view-model 数据与视图之间的逻辑
- M
5.什么是渐进式框架
就是参与的少，在实现功能的时候，允许多个框架或库参与
6.Vue的特点
- 数组驱动
- 指令系统
- 组件化开发
- 路由系统
- Vuex
7. 创建一个Vue对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">{{str}}</div><!--欢迎学习vue-->
</body>
</html>
<!--引入vue的js文件-->
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//--->data中可写入数据
str:"欢迎学习vue"
}
})
</script>
7.Vue的指令
-
v-text
说明: 文本数据渲染
用法: v-text = "Vue实例中的数据" => 简写 {{Vue实例中的数据}}相当于JavaScript中的innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<p v-text="str"> </p><!--欢迎学习vue-->
<!--<b>hello world</b> -->
<p v-text="str1"> </p>
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{
str:"欢迎学习vue",
str1:`<b>hello world</b>`
}
})
</script>
- v-html
说明: HTML渲染数据
用法:v-html = "Vue实例中的数据"
会解析html结构 渲染至页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<p v-text="str"> </p><!--欢迎学习vue-->
<!--<b>hello world</b> -->
<p v-text="str1"> </p>
<!--解析HTML标签 hello world-->
<p v-html="str1"> </p>
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{
str:"欢迎学习vue",
str1:`<b>hello world</b>`
}
})
</script>
- v-html 指令和 v-text 指令的区别
-
v-html 会将数据解析成html 渲染至页面，通俗说：就是有标签的会解析，只输出内容；
-
v-text 只会输出成文本(字符串形式)，有标签的不会解析，全部输出；
注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用
-
- v-on
说明: 事件绑定(绑定事件监听器)
用法: v-on:事件名 = "方法名" => 简写 @事件名 = "方法名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<!--欢迎学习vue-->
<p v-text="str"> </p>
<!--<b>hello world</b>-->
<p v-text="str1"> </p>
<!--解析HTML标签 hello world-->
<p v-html="str1"> </p>
<!--v-on 事件绑定-->
<button v-on:click="add"> 点击 </button>
<!--v-on 事件绑定可简写 @事件名=‘方法名’-->
<button @click="add"> 点击 </button>
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//写入数据
str:"欢迎学习vue",
str1:`<b>hello world</b>`
},
methods:{//方法属性
add(){
alert('我是事件绑定v-on')
}
}
})
</script>
- v-bind
说明: 属性绑定(行内属性)
用法: v-bind:属性名="Vue实例中的数据" => 简写 :属性名="Vue实例中的数据"
当Vue实例中的数据改变之后 页面会同步更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<!--正常图片引入路径-->
<img src="./img/aa.png" alt="">
<!--v-bind：src=" '绑定图片路径'+变量" -->
<img v-bind:src="'./img/' +picture" alt="">
<!--简写 ：src=" '绑定图片路径'+变量"-->
<img :src="'./img/' +picture" alt="">
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//写入数据
picture:"aa.png"
},
})
</script>
-
v-model
说明: 双向数据绑定
用法: v-model = "Vue实例中的数据"注：只能运用在表单中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<!--在表单中写入数据，会在str数据中也显示，str中的数据，在表单中也会显示-->
<input type="text" v-model="str">
{{str}}
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//写入数据
str:"hello world"
},
})
</script>
-
v-for
说明: 循环渲染
用法: v-for = "(item,index) in items" :key = "index"注：item 是每一项元素 index 是当前每一项元素的索引值（下标）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in str">
<p> 每一项元素：{{item}}</p>
<p>每一项的索引值：{{index}}</p>
</li>
</ul>
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//写入数据
str:['hello','world','用心去看待世界','心中充满希望']
},
})
</script>
- v-if
说明: 条件(表达式或布尔值)判断渲染
用法:
v-if = "表达式或布尔值"
v-else-if = "表达式或布尔值"
v-else - v-show
说明: 条件渲染
用法: v-show = "表达式或布尔值"
根据表达式或布尔值的真假切换元素的display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初学vue</title>
</head>
<body>
<div id="app">
<!--num小于num条件成立，显示，如不成立，不渲染数据，不显示数据-->
<p v-if="num<num1">我是v-if条件判断</p>
<!--num小于num条件成立，显示，如不成立，隐藏数据-->
<p v-show="num<num1">我是v-show条件判断</p>
</div>
</body>
</html>
<script src="../vue九大指令/js/vue.js"></script>
<script>
var Vm=new Vue({
el:'#app',
data:{//写入数据
num:2,
num1:5
},
})
</script>
-
v-if 和 v-show 的区别：
v-if : 1.有较高的切换性能消耗 2.惰性渲染 第一次如果条件为false 则不 会渲染到页面 需要等后面条件切换后才会 进行第一次渲染 3.条件切换是切换DOM数中这个元素的移 除或添加 4.如果运行时条件很少改变则使用v-if v-show: 1.有较高的初始渲染消耗 2.初始渲染 不管条件 第一次加载页面的时 候都会渲染到页面 3.条件切换只是切换元素的display属性 4.如果运行时条件会非常频繁的切换则使 用v-show -
v-cloak
说明：这个指令是解决插值表达式的闪烁问题
用法：在当前的标签上加入v-cloak ，在样式中 [v-cloak]{display:none;}
