Vue的入门学习笔记(一)

Vue.js 官网教程：https://cn.vuejs.org/v2/guide/
B站Vue.js入门教学视频：https://www.bilibili.com/video/BV18E411a7mC?p=6

idea插件的安装

1.Plugins搜索vue 安装即可。
项目如何创建Vue Component组件：

image.png

如果没有Vue Component，设置模板里新增。详细操作可以看：https://blog.csdn.net/jdq8576/article/details/104055707/

image.png

CDN的方式引入Vue.js

完整版：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
简版：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

cdn如何引入vue.js详细介绍：https://blog.csdn.net/Mrs_chens/article/details/103295707

Vue基本语法

vue的7个属性
el属性
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
template属性
用来设置模板，会替换页面元素，包括占位符。
methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中
render属性
创建真正的Virtual Dom
computed属性
用来计算
watch属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值，

if 和 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">
<!-- 取值方式1-->
    {{message}}
    <br>

<!--2.绑定的方式-->
    <span v-bind:title="message">
        悬停绑定信息
    </span>

<!-- if else-->
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

<!-- if elseif elseif-->
    <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>Z</h1>

<!--for循环  以及index 下标用法-->
    <li v-for="item in items">
        {{item.message}}
    </li>
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        // Model：数据
       data:{
           message: "Hello Vue!",
           ok: true,
           type: 'A',
           items: [
               {message: "参数1"},
               {message: "参数2"},
               {message: "参数3"}
           ]
       }
    });
</script>
</body>
</html>

image.png

v-bind: 可以简写为 :
v-on:click可以简写为 @click

绑定事件

<!DOCTYPE html>
<html lang="en" 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="say">click</button>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        // Model：数据
       data:{
           message: "Hello Vue!"
       },
        // 方法必须定义在Vue的Methods对象中, 用 v-on: 事件调用
        methods: {
           say: function () {
                alert(this.message);
           }
        }
    });
</script>
</body>
</html>

双向绑定

<!DOCTYPE html>
<html lang="en" 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}}
    <br>

    性别:    <input type="radio" name="sex" value="男" v-model="testradio">男
            <input type="radio" name="sex" value="女" v-model="testradio">女
    选中了：{{testradio}}
    <br>

    <select name="" id=""  v-model="testselect">
        <option value="" disabled>--请选择--</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    选中了：{{testselect}}

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
       data:{
           message: "123",
           testradio: '',
           testselect:''
       }
    });
</script>
</body>
</html>

image.png

Vue组件
Vue组件的官网详细介绍:https://cn.vuejs.org/v2/guide/components-registration.html
Prop属性的详细介绍:https://cn.vuejs.org/v2/guide/components-props.html

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

<div id="app">

    <!--组件:传递给组件中的值: props-->
    <testcomponet v-for="item in items" v-bind:salt="item"></testcomponet>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // 定义一个Vue组component, 第一个参数为自定义的组件名称
    Vue.component("testcomponet",{
        // props属性 用来传递参数(这里是v-bind绑定的数据),自定义绑定名称
        props: ['salt'],
        template: '<li>{{salt}}</li>'
    });

    var vm = new Vue({
       el: "#app",
       data:{
           items: ["java","vue","react"]
       }
    });
</script>
</body>
</html>

image.png

计算属性
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销.
官网关于计算属性的详解:https://cn.vuejs.org/v2/guide/computed.html

<script>
    var vm = new Vue({
        el: "#app",
        // Model：数据
        data:{
            message: "Hello Vue!"
        },
        // 方法必须定义在Vue的Methods对象中, 用 v-on: 事件调用
        methods: {
            currenttime1: function () {
                return Date.now();
            }
        },
        computed: {
            //计算属性 可以想象成缓存，如果里面的值没有变化，下次就可以直接加载.
            currenttime2: function () {
                return Date.now();
            }
        }
    });
</script>

插槽
官网介绍:https://cn.vuejs.org/v2/guide/components-slots.html

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

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // slot 插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                       </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<div>{{item}}</div>'
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title: "参数列表",
            items: ["java","vue","react"]
        }
    });
</script>
</body>
</html>

image.png

自定义事件:
关于组件基础官网文档:https://cn.vuejs.org/v2/guide/components.html
这边有一点需要注意的是,每一个component组件中的data必须是一个函数,互不影响,↑文档中有详细解释.

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

<div id="app">

    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    // slot 插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                       </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}---{{item}} <button @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove',index);
            }
        }
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title: "参数列表",
            items: ["java","vue","react"]
        },
        methods: {
            removeItems: function (index) {
                this.items.splice(index,1);//下标1 即为删除当前元素
            }
        }
    });
</script>
</body>
</html>

image.png

vue-axios实现异步通信(等同于ajax)

中文官网:http://www.axios-js.com/zh-cn/docs/vue-axios.html
CDN方式引入Axios:
Axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

<!--v-clock解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-clock>

    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">点击</a>

</div>

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

    var vm = new Vue({
       el: "#app",
        //data 属性 :vm
        data(){
           return{
               //请求返回的参数格式,必须和json字符串一样
               info: {
                   name: null,
                   address: null,
                   url: null
               }
           }
        },
       mounted(){
           //钩子函数
           axios.get('../data.json').then(response=>(this.info=response.data));
       }
    });
</script>
</body>
</html>

data.json文件内容
{
  "name": "salt",
  "address": "jianshu",
  "url": "https://www.jianshu.com/u/a8170bf39a33"
}

image.png