Vue常用的操作指令
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue常用的操作指令相关的知识，希望对你有一定的参考价值。
前几天给大家介绍了Vue的优点，还有安装步骤，今天给大家再介绍一下Vue常用的操作命令：
常用指令：
v-text:用于显示文本
v-html:用于显示HTML 节点里面的内容
v-model:可以绑定 视图上面的数据模型
(数据模型需要在data中 初始化)
v-for: 用于 遍历数组 v-for="value in array" ->写在
希望重复的元素上面
v-if
v-else
v-else-if
v-show: 根据条件来显示
v-bind:用于绑定属性 简写 :class :src :href ...
v-on:用于绑定事件，简写 @事件名
模板：
render函数
eg:1
var vm = new Vue({
el:"#demo",
data:obj,
//template:str,
render(createElement){ //render函数
return createElement(
"ul",
[
createElement("li","内容111"),
createElement("li","内容222"),
createElement("li","内容333"),
createElement("li","内容444"),
]
)
},
eg:2
<style>
.bg { width:300px; }
</style>
</head>
<body>
<div id="demo"></div>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:"#demo",
//createElement(标签名，[数据对象]，子元素)
//数据对象的属性
/*
* class:{}, stayle:{}, attrs:{}添加行间属性 ， domProps:{} dom元素属性
* 下面的跟组件有关系的操作
* nativeOn:{}监听原生事件， scopedSlots:{} slot作用域, on:{} 绑定事件，
* key:"key" 给元素加唯一标示， slot:{} 定义slot名称 ， ref:"ref" 引用信息
* */
render(createElement){
return createElement(
"ul",
{
class:{
bg:true
},
style:{
fontSize:"22px"
},
attrs:{ //自定义属性
a:"miao"
},
domProps:{ //dom ,改变ul里面的结构，下面创建的标签就都无用了
//innerHTML:"<li>我是html</li>"
},
},
[
createElement("li",1),
createElement("li",1),
createElement("li",1),
]
)
}
})
</script>
html模板
字符串模板 ： template
eg:
<div id="demo">
<!--<div v-bind:class="id"> {{ msg }} </div>-->
<!--<p v-html="html"></p>-->
<span>miaov</span>
</div>
<script src="vue.min.js"></script>
<script>
//数据
let obj = {
msg : "hello",
id:"123",
//html:"<p>标签不解析出来，标签上加 v-html="html"就好</p>",
dd:"xianghui"
}
var str = "<div>hello:{{ dd }}</div>"
var vm = new Vue({
el:"#demo",
data:obj,
template:str, //template:"#id", scriot形式渲染
})
</script>
以上是关于Vue常用的操作指令的主要内容，如果未能解决你的问题，请参考以下文章