2 Vue.js基础
Posted littleduan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2 Vue.js基础相关的知识，希望对你有一定的参考价值。
1 简易计算器
<!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> <script src="lib/vue.js"></script> </head> <body> <div id="app" v-model="opt"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select > <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script> var vm=new Vue( el:‘#app‘, data: n1:0, n2:0, result:0, opt:‘+‘ , methods: calc() /* switch (this.opt) case ‘+‘: this.result = parseInt(this.n1) + parseInt(this.n2) break; case ‘-‘: this.result = parseInt(this.n1) - parseInt(this.n2) break; case ‘*‘: this.result = parseInt(this.n1) * parseInt(this.n2) break; case ‘/‘: this.result = parseInt(this.n1) / parseInt(this.n2) break; default: break; */ //正式项目不推荐下面的写法 var codeStr=‘parseInt(this.n1)‘ + this.opt + ‘parseInt(this.n2)‘ this.result =eval(codeStr) ) </script> </body> </html>
2. Vue中的样式
<!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>
<script src="lib/vue.js"></script>
<style>
.red
color: red;
.thin
font-weight: 200;
.italic
font-style: italic
.active
letter-spacing: 0.5em;
</style>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个H1！！！</h1> -->
<!--第一种使用方法，直接传递一个数组进去，必须用单引号来分开才会认为这是一个变量，否则会直接默认为是一个字符串-->
<!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1！！！</h1> -->
<!--在数组中使用三元表达式-->
<!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1！！！</h1> -->
<!--用对象的形式来代替三元表达式-->
<!-- <h1 :class="[‘red‘,‘italic‘,‘active‘:flag]">这是一个H1！！！</h1> -->
<!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中-->
<h1 :class="calssobj">这是一个H1！！！</h1>
</div>
<script>
var vm=new Vue(
el:"#app",
data:
flag:true,
calssobj:red:true,thin:true,italic:false,active:false
,
methods:
)
</script>
</body>
</html>
3. Vue的Class样式的使用
<!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>
<script src="lib/vue.js"></script>
<style>
.red
color: red;
.thin
font-weight: 200;
.italic
font-style: italic
.active
letter-spacing: 0.5em;
</style>
</head>
<body>
<div id="app">
<!-- <h1 class="red thin">这是一个H1！！！</h1> -->
<!--第一种使用方法，直接传递一个数组进去，必须用单引号来分开才会认为这是一个变量，否则会直接默认为是一个字符串-->
<!-- <h1 :class="[‘red‘,‘italic‘]">这是一个H1！！！</h1> -->
<!--在数组中使用三元表达式-->
<!-- <h1 :class="[‘red‘,‘italic‘,flag?‘active‘:‘‘]">这是一个H1！！！</h1> -->
<!--用对象的形式来代替三元表达式-->
<!-- <h1 :class="[‘red‘,‘italic‘,‘active‘:flag]">这是一个H1！！！</h1> -->
<!-- 直接使用对象,或者也可以直接把classobj中的内容 直接放到class中-->
<h1 :class="calssobj">这是一个H1！！！</h1>
</div>
<script>
var vm=new Vue(
el:"#app",
data:
flag:true,
calssobj:red:true,thin:true,italic:false,active:false
,
methods:
)
</script>
</body>
</html>
4. Vue的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>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <p>list[0]</p>
<p>list[1]</p>
<p>list[2]</p>
<p>list[3]</p>
<p>list[4]</p>
<p>list[5]</p> -->
<!-- <p v-for="(item,i) in list">索引：i--item</p> -->
<p v-for="(user,i) in LT">ID:user.ID --- name:user.name --- index:i</p>
</div>
<script>
var vm=new Vue(
el:‘#app‘,
data:
list:[1,2,3,4,5,6,],
LT:[
ID:1,name:‘11‘,
ID:2,name:‘22‘,
ID:3,name:‘33‘,
ID:4,name:‘44‘
]
,
methods:
)
</script>
</body>
</html>
5. Vue v-for对象以及key的使用
<!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>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历对象身上的键值对时 除了val,key还有一个索引i -->
<!-- <p v-for="(val,key,i) in user"> 值：val --- 键：key 索引：i</p> -->
<!-- <p v-for="count in 10">这是第 count 次循环</p> //循环数字，起始是1 -->
<!-- for循环的key的使用 -->
<div>
<label >Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 1 在使用key的时候一定要使用v-bind属性绑定形式，制定key的值
2 在组建中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题必须在使用v-for的同时，
制定唯一的字符串/数字类型：key值 -->
<p v-for="item in list" :key="item"> <!-- 可以保证数据的唯一性 -->
<input type="checkbox">item.id --- item.name
</p>
</div>
<script>
var vm=new Vue(
el:‘#app‘,
data:
list:[
id:1,name:‘唐‘,
id:2,name:‘宋‘,
id:3,name:‘元‘,
id:4,name:‘明‘,
id:5,name:‘清‘
]
,
methods:
add()
this.list.unshift(id:this.id,name:this.name);
)
</script>
</body>
</html>
6. Vue的v-if和v-show的使用
<!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>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="flag=!flag">
<!--
v-if的特点：每次都会重新删除或创建元素 有较高的切换性能消耗
v-show的特点：每次不会进行DOM的删除或创建操作，只是切换了元素的display：nene的属性 有较高的初始或渲染消耗
如果元素要频繁的切换最好不要使用v-if
如果是永久性的不显示，则推荐v-if
-->
<P v-if="flag">Hello</P>
<p v-show="flag">Word</p>
</div>
<script>
//2.创建一个Vue实例
//当我们带入包之后，在浏览器内存中就多了一个Vue构造函数
var vm =new Vue(
el:‘#app‘,
data :
flag:true
)
</script>
</body>
</html>
以上是关于2 Vue.js基础的主要内容，如果未能解决你的问题，请参考以下文章