概述
1. Vue实例化
1.创建一个app （application应用）
2 定义数据data
3 把app实例挂在到#app节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
</div>
<script type="text/javascript">
// 创建一个app (Application应用)
const app = Vue.createApp({
// 定义数据data
data(){
return{msg:"你好vue"}
}
// 把app实例挂载到#app节点
}).mount("#app")
</script>
</body>
</html>
2 文本渲染 （v-text ，{{msg}} ，v-html ）
1.v-text
2 {{msg}}只能写一行表达式
不能写复杂js如果if
3 v-html 可以添加标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 我们把app内的内容p 称为模板内容
v-开头的属性成为 模板的指令
通过指令把html模板和js联系到一起 从而对模板进行修改和控制-->
<div id="app">
<p v-text="msg"></p>
</div>
<script type="text/javascript">
// 创建一个app (Application应用)
const app = Vue.createApp({
// 定义数据data
data(){
// 返回msg值
return{msg:"你好vue"}
}
})
// 把app实例挂载到#app节点
var vm = app.mount("#app")
</script>
</body>
</html>
3 属性渲染
v-bind:属性名=“值”
简写 :属性名=“值”
案例渲染p标签的title属性 和button的disabled属性
<div id="app">
<p v-bind:title="msg">我是个小p</p>
<p :title="msg">我是个小p</p>
<button :disabled="!canUse">按钮</button>
</div>
<script>
Vue.createApp({
data(){
return {
msg:"我学vue，我骄傲！",
canUse:false,
}
}
}).mount("#app")
</script>4 条件渲染
1 v-if v-show 都是条件渲染 通过改变retun的值来渲染p标签的条件
2 区别和利弊
v-show是通过css方法隐藏节点
v-if是直接移除节点隐藏
如果频繁切换显示与隐藏的话就用 v-show
偶尔切换显示隐藏的话用 v-if
<div id="app">
<p v-if="can">我会显示的</p>
<p v-show="can">我也会显示show</p>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return {can:true}
}
}).mount("#app")
// v-show是通过css方法隐藏节点
// v-if是直接移除节点隐藏
// 如果频繁切换显示与隐藏的话就用 v-show
// 偶尔切换显示隐藏的话用 v-if
</script>3 多重条件渲染 案例 改变score的值对score进行输出
<div id="app">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=70">中等</p>
<p v-else-if="score>=60">及格</p>
<p v-else>菜鸟</p>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return {score:75}
}
}).mount("#app")
</script>4 列表渲染指令
1 v-for 指令
item变量的当前数据
index 当前的下表
key是给vue遍历的节点一个唯一的标识符，更好的让vue去做排序过滤等操作，为了性能的优化，要求在一个for指令里面key的值要唯一
<div id="app">
<ul>
<!-- item 当前数据 index当前的下标 -->
<li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
</ul>
<!-- key属性为了让Vue内部给遍历的节点设置一个唯一的标识,以便更好的去执行
(排序 过滤 等操作) 为了性能优化:key的唯一性 -->
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return {list:["Vur","react","angular"]}
}
}).mount("#app")
</script>输出结果
2 对象的遍历
遍历对象
v-for="(value,key) in obj"
<div id="app">
<div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return {obj:{title:"Vue入门",name:"小凤",pate:"2022-2-24"}}
}
}).mount("#app")
</script>3 for if 的使用
打印十以内的所有偶数 for + 范围 用<template>标签 ，if + 条件
<div id="app">
<template v-for="item in 10">
<p v-if="item%2===0">{{item}}</p>
</template>
</div>
<script type="text/javascript">
Vue.createApp({
data(){
return{}
}
}).mount("#app")
</script>5 点击事件
1 v-on:click 指令 缩写为 @:click
2 methods 存放方法
3 设置事件对象
<div id="app">
<button v-on:click="num++">{{num}}</button>
<button @click="say">你好</button>
</div>
<script type="text/javascript">
Vue.createApp({
// 存放数据
data(){
return {num:1}
},
// 存放方法
methods:{
// e代表事件对象
say(e){
console.log(e,e.target);
alert("别点我"+this.num);
this.num++;
}
}
}).mount("#app")
</script>6内联事件
在say( )内加上事件 后加$event用逗号隔开配置事件对象
<div id="app">
<p>
<button @click="say('中国',$event)">你好</button>
</p>
<p>
<button @click="say(num,$event)">{{num}}</button>
</p>
</div>
<script type="text/javascript">
Vue.createApp({
// 存放数据
data(){
return {num:1}
},
// 存放方法
methods:{
// e代表事件对象
say(msg,e){
console.log(e.target);
alert(msg);
this.num++;
}
}
}).mount("#app")
</script>最后
以上就是迷你早晨为你收集整理的知识总结 Vue1. Vue实例化2 文本渲染 （v-text ，{{msg}} ，v-html ）3 属性渲染4 条件渲染4 列表渲染指令5 点击事件6内联事件的全部内容，希望文章能够帮你解决知识总结 Vue1. Vue实例化2 文本渲染 （v-text ，{{msg}} ，v-html ）3 属性渲染4 条件渲染4 列表渲染指令5 点击事件6内联事件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复