Vue基础学习之DOM操作

Posted 2020-09-10 YanEr、

demo说明：
1、{{message}}                          --声明式渲染
2、v-bind:属性名                        --绑定元素属性
3、v-if="change==‘a‘"              --判断change==‘a‘，等于则显示该DOM节点
4、v-else-if="change==‘b‘"      --结合[v-if]使用，判断change==‘b‘，等于则显示该DOM节点
5、v-else                                   --结合[v-if]or[v-else-if]使用，当他们的条件全部为假时，显示该DOM节点
6、v-for:"i in itemTest"             --以i遍历循环输出itemTest数组中的值，类似于Js的for...in
7、v-on:事件="function"           --监听DOM事件，并当事件被触发时执行function函数
8、v-model="inputInfo"           --结合 {{inputInfo}} 实现表单输入与应用状态之间的双向绑定

 1 demo：
 2     <div id="app">
 3         <header v-bind:title="message" v-bind:class="headerClass">{{message}}</header>
 4         <section>
 5             <p v-if="change==‘a‘">如果change等于a，我就会显示</p>
 6             <p v-else-if="change==‘b‘">如果change等于b，我就会显示</p>
 7             <p v-else>如果change不等于a也不是b，我就会显示</p>
 8             <ul>
 9                 <li v-for="i in itemTest">{{i}}</li>
10             </ul>
11             <button v-on:click="btnClick">点击就会弹窗</button>
12             <br/><br/>
13             <input type="text" name="inputInfo" v-model="inputInfo">  <span>您输入的信息为：{{inputInfo}}</span>
14         </section>
15         <br/><br/>
16     </div>
17 
18     <script>
19         var app=new Vue({
20             el:"#app",
21             data:{
22                 message:"我的第一个vue实例",
23                 headerClass:"textTitle",
24                 change:"a",
25                 itemTest:["橘子","桃子","梨子","栗子","李子"],
26                 inputInfo:"我的第一个vue输入实例"
27             },
28             methods:{
29                 btnClick:function(){
30                     alert("vue可以监听DOM事件")
31                 }
32             }
33         })
34     </script>