前几天给大家介绍了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>
时间： 2024-08-05 11:44:59