基础

el:挂载点

作用范围：el选择器包裹的元素及其后代

建议使用id选择器

data:数据对象

形式 message:"   ",

        school:{

                name:"  ",

                mobile:"   "

        }

引用：{{ school.name }}

渲染数据内容时遵循js语法

v-text

设置标签的文本值

默认会替换所有内容

使用插值表达式可以替换指定内容

<div id="app">
        <h2 v-text="message"> 111 </h2>
</div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World!'
            }
        })
    </script>

无论h2有什么内容，都会被替换成messag里的

在v-text里，显示在页面上的只有message里面的信息,不出现111

另一种写法：插值表达式

<div id="app">
        <h2 v-text="message + '!!' "></h2>
</div>

    <div id="app">
        <h2>你好{{ message + "!!" }}</h2>
    </div>

v-html

设置标签的innerHTML

能够解析内容里的标签

    <div id="app">
        <p v-html="content"></p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                content:"<a href='https://www.baidu.com'>百度</a>"
            }
        })
    </script>

v-on

为元素绑定事件

可以简写为@

绑定的方法定义在methods属性里

补充：

传递自定义参数，事件修饰符

@click="doIt(p1,p2)"

@keyup.enter="sayHi"   (在回车时触发)

    <div id="app">
        <input type="button" value="点击" v-on:click="doIt">
        <input type="button" value="点击" @click="doIt">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            methods: {
                doIt: function () {
                    alert('点击了')
                }
            }
        })
    </script>

更改内容

    <div id="app">
        <h2 @click="change"> {{food}} </h2>
    </div>

    <script src="./vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                food:"苹果"
            },
            methods: {
                change:function(){
                    this.food = "香蕉"
                }
            }
        })
    </script>

计数器案例

   <div class="input-num">
      <button @click="numDel">-</button>
      <span>{{ num }}</span>
      <button @click="numAdd">+</button>
   </div>

    <script src="./vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '.input-num',
            data:{
                num:0
            },
            methods: {
                numAdd:function(){
                    this.num++
                },
                numDel:function(){
                    this.num--
                }
            }
        })
    </script>

v-show

根据表达式的真假切换元素的显示与隐藏

形式 data:{

                isShow:true

        }

    <div id="app">
        <input type="button" value="change" @click="change"></input>
        <img src="./img/1.jpg" v-show="isShow">
    </div>

    <script src="./vue.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            data:{
                isShow: true
            },
            methods: {
                change: function () {
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

v-if

根据表达式真假切换元素隐藏与显示

v-show自始至终都在，只是显示与隐藏，频繁切换用v-show

v-if直接在DOM中移除了，但操作dom对性能要求大

v-bind

设置元素的属性（src，title，class）

简写用 '：'

v-bind:属性=

    .active{
        border: 1px  solid  red
    }

    <div id="app">
        <img :src=""  v-bind:class="{active: isActive}">
        <img :src=""  v-bind:class="isActive? 'active':''">
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
               isActive: true
            }
        })
    </script>

图片切换案例

    <div id="a">
        <button v-show="index!=0" @click="prev"> < </button>
        <img v-bind:src="imgSrc[index]" >
        <button v-show="index!=imgSrc.length-1" @click="next"> > </button>
        
    </div>
    <script src="./vue.js"></script>

    <script>
        var app = new Vue({
            el: '#a',
            data: {
               imgSrc: ["./user.jpg","./果蔬.jpg","./土.jpg","./山珍特产.jpg"],
               index:0, 
            },
            methods: {
               prev:function(){
                this.index--;
               },
               next:function(){
                this.index++;
               }
            }
        })
    </script>

v-for

根据数据生成列表结构

    <div id="app">
        <ul>
            <li v-for="item in list" :key="item">
                字母：{{item}}
            </li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
               list: ['a', 'b', 'c']
            }
        })
    </script>

        <ul>
            <li v-for="(it, index) in list" :key="item">
                {{index+1}} 字母：{{item}}
            </li>
        </ul>

对象类

        <h2 v-for="item in veg">
            {{item.name}}
        </h2>

          veg:[
                {name: 'apple', price: 5},
                {name: 'orange', price: 6}
               ]

v-model

获取和设置表单元素的值——双向绑定数据

v-model=""

案例记事本

    <section id="todo">
        <div class="header">
            <h1>待办事项</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="输入任务">
        </div>
        
        <ul class="todo-list">
            <li v-for="(item,index) in list">
                <span > {{ index+1 }}. </span>
                <label> {{item}} </label>
                <button @click="remove(index)"> del </button>
            </li>
        </ul>

        <section class="footer">
            <span class="todo-count" v-show="list.length!=0"> {{list.length}} </span>
            <button @click="clear"> 清空 </button>
        </section>
    </section>


    <script>
        var app = new Vue({
            el: '#todo',
            data: {
               list:["xie","zhang","li"],
               inputValue: '好好学习',
            },
            methods: {
               add:function(){
                this.list.push(this.inputValue);
               },
               remove:function(index){
                this.list.splice(index,1);
               },
               clear:function(){
                this.list=[];
               }
            }
        })
    </script>

网络应用

axios

网络请求库——发送请求，获取响应

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios+vue

    <div id="app">
        <input type="button" value="获取" @click="getData">
        <p>{{msg}}</p>
    </div>

    <script src="./vue.js"></script>
    <script src="./axios.js"></script>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue'
            },
            methods: {
                getData: function () {
                    axios.get('https://autumnfish.cn/api/joke').then(function (response) {
                        console.log(response.data);
                    }, function (err) {
                        console.log(err);
                    })
                }
            }
        })
    </script>

综合案例