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常用的操作指令的主要内容,如果未能解决你的问题,请参考以下文章

vue常用14个指令

Vue常用的操作指令

8个非常实用的Vue自定义指令

8个非常实用的Vue自定义指令

Vue 常用特性:表单操作自定义指令计算属性侦听器过滤器生命周期

vue学习之路 - 4.基本操作(下)