vue入门

Posted da-chun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue入门相关的知识，希望对你有一定的参考价值。

vue基础

vue.js的cdn链接引入

https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

https://cdn.bootcss.com/vue/2.5.16/vue.min.js

axios.js的cdn引入

https://unpkg.com/axios/dist/axios.min.js

第一个Vue程序（ {{}}、v-bind）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    
    <!--可以通过v-bind绑定，也可以直接{{}}获取-->
    
    <!--将message绑定到title上-->
    <!--<span v-bind:title="message">
        鼠标悬停几秒查看此处动态绑定的提示信息
    </span>-->
    {{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        //Model层：数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

v-if、v-else-if、v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<!--view层 模板-->
<div id="app">
    <!--ok值为true显示Yes；ok值为false，显示No-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

    <h1 v-if="type===\'A\'">A</h1>
    <h1 v-else-if="type===\'B\'">B</h1>
    <h1 v-else-if="type===\'C\'">C</h1>
    <h1 v-else>D</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ok: true,
            type: \'A\'
        }
    });
</script>
</body>
</html>

v-for

<!--v-for-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">

    <!--遍历items数组，index为遍历的数组下标-->
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            items: [
                {message: "A"},
                {message: "B"}
            ]
        }
    });
</script>
</body>
</html>

绑定事件（v-on）

<!--绑定事件-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <button v-on:click="sayHi">点击我</button>
    <!-- v-on简写：<button @click="sayHi">点击我</button> -->
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "Java无止境"
        },
        methods: { //方法必须定义在 Vue 的 Methods 对象中,v-on:事件
            sayHi: function () {
                //\'this\'在方法里指向当前Vue实例
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

双向绑定（v-model）

<!--双向绑定-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
	<!--文本框-->
    <!--输入的文本：<input type="text" v-model="message">{{message}}-->

	<!--多行文本框-->
    <!--<textarea cols="30" rows="10" v-model="message"></textarea>{{message}}-->

	<!--单选按钮-->
    <!--性别：
    <input type="radio" name="sex" value="男" v-model="dc">男
    <input type="radio" name="sex" value="女" v-model="dc">女
    <p>
        选中了谁：{{dc}}
    </p>-->

    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option selected>B</option>
        <option>C</option>
    </select>
    <span>value:{{selected}}</span>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data: {
            // message: "Java无止境"
            // dc: ""
            selected: ""
        }

    });
</script>
</body>
</html>

自定义组件（Vue.component）

<!--Vue组件（自定义标签、组件就是一个模板的意思-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">

    <!--
         v-bind:dc="item":将遍历items的每一项项绑定到组件中props定义的dc属性上，
         =号左边的item为props定义的属性名,右边为item in items中遍历的item项的值。
    -->
    <dchun v-for="item in items" v-bind:dc="item"></dchun>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    /*自定义组件(标签)*/
    Vue.component("dchun",{
        //通过props进行传参，最终在view层绑定vm中的数据
        props:["dc"],
        template:"<li>{{dc}}</li>"
    });

    var vm=new Vue({
        el:"#app",
        data:{
            items:["Java","Linux","前端"]
        }
    });
</script>
</body>
</html>

axios异步通信

{
  "name": "努力努力再努力",
  "url": "https://www.cnblogs.com/da-chun/p/14880212.html",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "link": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "da-chun",
      "url": "https://www.cnblogs.com/da-chun/p/14880212.html"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

<!--axios异步通信-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">

    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <!-- v-bind:与下面属性进行绑定 -->
    <a v-bind:href="info.url">点击我</a>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!--导入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var vm=new Vue({
        el:"#vue",
        //data：属性（VM）

        //data()方法
        data(){
            return{
                //请求的返回参数必须和json字符串一致
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        county: null
                    },
                    url: null
                }
            }
        },

        mounted(){ //钩子函数 链式编程 ES6新特性
            axios.get(\'../data.json\').then(response=>(this.info=response.data));
        }

    });
</script>
</body>
</html>

计算属性（computed：）

<!--
    计算属性：
    计算属性重点突出在 属性 两个字上（属性是名词），
    首先它是个属性其次这个属性有 计算 能力（计算是动词），这里的计算就是个函数；
    他就是一个能将计算结果缓存起来的属性（将行为转化成了静态的属性）；
    可以想象为缓存！
    -->
<!--
    结论：调用方法时每次都要进行计算，然后计算过程必定产生开销，那么如果这个结果不经常变化呢？
    此时就可以考虑将这个结果缓存起来，
    用 计算属性 可以做到！！
    计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以结果系统开销。
    -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">

    <!--methods中currentTime1是方法-->
    <p>currentTime1 {{currentTime1()}}</p>

    <!--computed中currentTime2是属性-->
    <p>currentTime2 {{currentTime2}}</p>

</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message: "hello,Java"
        },
        methods: {
            currentTime1: function(){
                return Date.now();//返回一个时间戳
            }
        },

        //计算属性 ：methods、computed 方法名不能重名，如果重名只会调用methods的方法。
        computed: {
            currentTime2: function(){//通过方法计算出来后就将结果缓存起来了
                this.message;//当方法中的数据发生变化 就重新计算
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

插槽(slot标签)自定义事件($emit方法)

<!--插槽、自定义事件-->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="app">
    <!--<p>列表</p>
    <ul>
        <li>Java</li>
        <li>Linux</li>
        <li>Python</li>
    </ul>-->
    <todo>
        <!--将vm的data属性中的title绑定到todo-title组件的props中的title上-->
        <!--<todo-title slot="todo-title" v-bind:title="title"></todo-title>-->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--将遍历todoItems的每一项绑定到todo-items组件的item属性中   通过v-bind绑定 将遍历的数组index传递到组件中-->
                    <!-- 自定义事件remove-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index"
                    v-on:remove="removeItems(index)" ></todo-items>
    </todo>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    //slot:插槽
    Vue.component("todo",{
        template:
            // "<div>"+
            //     "<slot name=\'todo-title\'></slot>"+
            //     "<ul>" +
            //         "<slot name=\'tod-items\'></slot>"+
            //     "</ul>"+
            // "</div>"
            \'<div>\\
                <slot name="todo-title"></slot>\\
                <ul>\\
                    <slot name="todo-items"></slot>\\
                </ul>\\
            </div>\'
    });

    Vue.component("todo-title",{
        //通过props进行传参，最在view层绑定vm中的数据
        props: ["title"],
        template: "<div>{{title}}</div>"
    });
    Vue.component("todo-items",{
        props: ["item","index"],
        //组件中只能绑定组件自己的方法，但不能绑定vm中的方法！！
        template: "<li>{{index}}--{{item}}<button @click=\'remove\'>删除</button></li>",
        methods: {
            remove: function (index) {
                //通过this对象$emit方法触发自定义事件remove，当remove触发时会触发remove事件，index是携带的参数
                this.$emit("remove",index);
            }
        }
    });

    var vm=new Vue({
        el:"#app",
        data:{
            title:"课程",
            todoItems: ["Java","前端","Linux"]
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                //javascript中操作数组方法：arr.splice(起始索引,删除个数,[添加参数1],[添加参数2])
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>
</html>

以上是关于vue入门的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家