Vue快速入门笔记

Vue快速入门笔记

第一个vue程序

1. 导入开发版本的Vue.js

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   

2. 创建Vue实例对象，设置el属性和data属性

   var app = new Vue({
        el: "#app",
        data: {
            message: "你好Vue"
        }
    })
   

3. 使用简洁的模板语法把数据渲染到页面上

   <div id="app">
        {{message}}
    </div>
   

el挂载点和data数据对象

el挂载点

• el是用来设置Vue实例挂载（管理）的元素
• Vue会管理el选项命中的元素及其内部的后代素
• 可以使用其他的选择器，但是建议使用ID选择器
• 可以使用其他的双标签，不能使用html和body

<!-->html代码<-->
    <div id="app">{{message}}</div>
    <div class="app2">{{message}}</div>

//js代码
    //id选择器
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好app"
        }
    })
    //class选择器
    var app = new Vue({
        el: ".app2",
        data: {
            message: "你好app1"
        }
    })

data数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂类型数据时，遵守js的语法即可

<!-->html代码<-->
    <div id="app">
        {{message}}; 
        {{array[0]}};{{array[1]}}; 
        {obj.hello}};{{obj.app}}
    </div>

//js代码
    var app = new Vue({
        el: "#app",
        data: {
            message: "你好app",
            array: ["你好", "app"],
            obj: {
                hello: "你好",
                app: "app"
            }
        }
    })

Vue指令

v-text

• 作用：设置标签的内容(text-content)
• 默认写法会替换全部内容
• 内部支持写表达式

<!-->html代码<-->
    <div id="app">
        <p v-html="content">该文本会被替换</p>
        <p v-html="content+'!!!'"></p>
    </div>

//js代码
    var app = new Vue({
        el: "#app",
        data: {
            content: "大猩",
        }
    })

v-html

• 作用：设置元素的innerHTML
• 内容中有html结构会被解析为标签
• 解析文本使用v-text，需解析html结构使用v-html

<!-->html代码<-->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

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

v-on

• 作用：为元素绑定事件
• 事件名不需要写on
• 指令可以简写为@
• 绑定的方法定义在methods属性中
• 方法内部通过this关键字可以访问定义在data中的数据

<!-->html代码<-->
    <input type="button" value="单击" v-on:click="dolt1">
    <input type="button" value="鼠标经过" v-on:monseenter="dolt2">
    <input type="button" value="双击" v-on:dblclick="dolt3">
    <input type="button" value="单击1" @click="dolt4">

//js代码
    var app = new Vue({
        el: "#app",
        data: {
            a: 1
        },
        methods: {
            dolt1: function() {
                console.log("1");
            },
            dolt2: function() {
                console.log("2");
            },
            dolt3: function() {
                console.log("3");
            },
            dolt4: function() {
                this.a++;
                console.log(this.a);
            }
        }
    })

v-show

• 作用：根据真假切换元素的显示状态
• 原理上是修改元素的display，实现显示隐藏
• 指令后面的内容，最终都会解析为布尔值
• 值为true元素显示，值为false元素隐藏
• 数据改变之后，对应元素的显示状态会同步更新

<!-->html代码<-->
    <div id="app">
        <p v-show="false">1</p>
        <p v-show="isshow">2</p>
        <p v-show="a>1">3</p>
    </div>

    var app = new Vue({
        el: "#app",
        data: {
            a: 1,
            isshow: true
        }
    })

v-if

• 作用：根据表达式的真假切换元素的显示状态（与v-show类似）
• 本质是操作dom元素来切换显示状态
• v-show切换消耗小

v-bind

• 作用：为元素绑定属性
• 完整写法是：v-bind:属性名
• 简写的话可以直接省略v-bind，只保留**:属性名**
• 需要动态的增删class建议使用对象的方式

<!-->html代码<-->
    <div id="app">
        <img v-bind:src="image">
        <img :alt="imgTitle">
    </div>

    var app = new Vue({
        el: "#app",
        data: {
            image: "aaa.jpg",
            imgTitle: "图片"
        }
    })

v-for

• 作用：根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是(item,index) in 数据
• item和index可以结合其他指令一起使用
• 数组长度的更新会同步到页面上，是响应的

<!-->html代码<-->
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                {{index}}{{item}}<br>
            </li>
            <li v-for="(item,index) in objarr">
                {{index}}{{item.name}}<br>
            </li>
        </ul>
    </div>

//js代码
    var app = new Vue({
        el: "#app",
        data: {
            arr: [1, 2, 3, 4, 5],
            objarr: [{
                name: "大猩"
            }, {
                name: "小星"
            }]
        }
    })

v-model

• v-model指令的作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据**<–>**表单元素的值

<!-->html代码<-->
    <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>

    var app = new Vue({
        el: "#app",
        data: {
            message: "大猩"
        }
    })

网络应用

axios

• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容，或错误信息
• 语法

  //导包
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  //请求
  axios.get(地址?key=value1&key2=value2).then(function(res){},function(err){});
  axios.post(地址,参数对象).then(function(res){},function(err){});
  

<!-->html代码<-->
    <input type="button" value="get" @click="getjok">
    <p>{{joke}}</p>

//js代码
    var app = new Vue({
        el: "#app",
        data: {
            joke: "笑话"
        },
        methods: {
            getjok: function() {
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then
                    (function(res) {
                        console.log(res)
                        that.joke = res.data
                    },
                    function(err) {})
            }
        }
    })