首页 > 代码库 > Vue常用的操作指令

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="http://www.mamicode.com/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="http://www.mamicode.com/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常用的操作指令