#vueJS插值指令
文章目录
框架的作用
原生DOM操作的非常平凡因此采用框架开发
使用框架开发:
只需要关注数据变化还是视图变化,学习VUE需要具备的知识点:
1、html + css 2、javaScript 3、DOM对象
vue框架不支持IE8及其一下的版本,
VUE的使用
VUE使用方法有两种方法,一种是直接导入vue的连接;一种使用脚手架开发,前期我们学习直接上连接,后期使用上脚手架。
vue.js 初始化
初始化需要使用vue.js 目前一般使用2.6版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 挂载对象 -->
<div id='app'>
<!-- 映射数据 -->
<input type='text' v-model="inp">
</div>
<!-- 外部应用js -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 初始化vue -->
<script>
let vm = new Vue({
el:'#app',// 挂载到id=app的dom上
// data:{}, // 第一种写法
// data:function(){return {}}, // 第二种写法
// 保存对应的数据内容
// data(){ return {}}// 第三种写法
data:{// 数据集
inp:'这是变量inp的数据值'
}
})
</script>
</body>
</html>
基本指令
{{ }}
插值符号:插值符号应用vue中data数据中的变量名
v-text
文本方式解析data键值
v-html
html方式解析data键值
v-show
控制HTMl中标签是否显示
插值符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 挂载对象 -->
<div id='app'>
<!-- {{}} 插值符号 -->
<h1>{{divTab}}</h1>
<!-- v-text 插值符号 -->
<h1 v-text="vText"></h1>
<!-- v-html 插值符号 -->
<h1 v-html='vHtml'></h1>
<!-- v-show 控制该元素在页面中是否显示 -->
<h1 v-show="vShow"></h1>
<!-- `` 表示字符串 可换行 -->
<h2 v-text=`vText`>显示原型vText</h2>
<h2 v-text=`${vText}`>显示变量中值</h2>
</div>
<!-- 引入外部应用js -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 初始化vue -->
<script>
let vm = new Vue({
el:'#app',
data:{
divTab:'这是插值符号 {{}} 插入的文本',
vText:'这是插值符号 v-text 插入的文本',
vHtml:'这是插值符号 v-html 插入的文本',
vShow:true,
vShowText:'当vShow:true时,当前标签显示,vShow:false时,当前标签隐藏不显示'
}
})
</script>
</body>
</html>
判断指令
v-if 判断是否成立 可单独使用
v-if v-else-if 可以和if连接使用
v-else 不能单独使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 判断指令 -->
<div id="app">
<div v-if='islogin'>if(islogin==true)</div>
<div v-else-if='isShow'>else if(isShow==true)</div>
<div v-else>else</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el:'#app',//挂载对象
data:function(){
return{
islogin: false,
isShow:true,
}
}
})
</script>
</body>
</html>
v-for 循环指令
v- for 循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 判断指令 -->
<div id="app">
<ul>
<li v-for='item in arr'>{{item}}</li>
<li v-for='(items,index) in arr'>{{index}}{{items}}</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el:'#app',//挂载对象
data:function(){
return{
arr:['冰淇淋','珍珠奶茶','拿铁','柠檬水']
}
}
})
</script>
</body>
</html>
本文含有隐藏内容,请 开通VIP 后查看