Vue--基础1

Vue-1、基本结构

<div id="app">
        
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                   
                }
            },
        })
    </script>

Vue-2、v-html

<div id="app">
        {{nickname}}
       <div v-html='nickname'></div>
 </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                   nickname:'<h1 style="clocr:red">Simba</h1>',
                }
            },
        })
    </script>

Vue-3、Vue的常用指令

1. v-on * HTML元素事件绑定监听事件
   语法：v-on:事件名称=‘函数名称()’
   简写语法：@事件名称=‘函数名称()’
   函数定义在 methodes:{}配置项中

2. v-for * 遍历data中的数据，并在页面进行数据展示
   语法：v-for=’(item,i) in items’ // items表示数组或者对象
   简写语法：@事件名称=‘函数名称()’
   函数定义在 methodes:{}配置项中

3. v-if / show
   语法：v-if=‘表达式’ / v-show=‘表达式’
   根据表达式结果的真假，确定是否显示当前元素
   true表示显示该元素，false表示隐藏该元素

   v-else  在v-if元素后面，否则不能被识别，且后面不需要表达式
   v-if为 true时，v-else不渲染到HTML
   v-if为 false时，v-else渲染到HTML
   
   v-if='表达式'    ：满足条件时才渲染到HTML
   v-show='表达式'  ：始终渲染到HTML 只是简单的位元素设置CSS样式
   

4. v-model 双向绑定
   语法：v-model=‘变量’
   v-model指令只能用在，，等表单上

5. v-bind 用于绑定数据和元素属性的
   语法：v-bind:属性名=‘表达式’
   简写语法：:属性名=‘表达式’
   

   Vue–4、mounted–生命周期钩子函数

<div id="app">
        <img v-show='i===activeIndex' v-for='(img,i) in imglist' :src="img" style="width: 700px;height: 200px;">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            mounted(){
                // Vue 全部渲染完成 类似于 onload
                setInterval(() => {
                    this.activeIndex++
                    if(this.activeIndex === this.imglist.length)
                        this.activeIndex=0
                }, 1000);
            },
            data(){
                return{
                    activeIndex:0,
                    imglist:[
                        'http://p1.music.126.net/SPr7e06SefLW1WIhbJ8nYg==/109951165132818526.jpg?imageView&quality=89',
                        'http://p1.music.126.net/JL7i3Gd-N2McYlgjhDmTlA==/109951165132077536.jpg?imageView&quality=89',
                        'http://p1.music.126.net/58n4OWp1KP3P0cpwGvByUg==/109951165132922681.jpg?imageView&quality=89'
                    ]
                }
            }
            
        })
    </script>