Vue入门

Vue入门

导入js文件使用方式

1、vue 基本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 基本格式</title>
</head>
<body>
​
<div id="app">
    {{message}}
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue !'
        }
    });
</script>
</body>
</html>
View Code

 

2、vue 条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 条件语句</title>
</head>
<body>
​
<div id="app">
    <h1 v-if="flag==='user'">user</h1>
    <h1 v-else-if="flag ==='admin'">admin</h1>
    <h1 v-else>other</h1>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {flag: 'admin'}
    });
</script>
</body>
</html>
View Code

 

3、vue 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue for循环</title>
</head>
<body>
​
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            items: [
                {message: '张三'},
                {message: '李四'},
                {message: '王五'},
                {message: '赵六'}
            ]
        }
    });
</script>
</body>
</html>
View Code

 

4、vue 点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 点击事件</title>
</head>
<body>
​
<div id="app">
    {{message}}
    <hr>
    <button v-on:click="sayHi()">按钮1</button>
    <button @click="sayHi()">按钮2</button>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {message: 'hello vue !'},
        methods: {
            sayHi: function () {
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>
View Code

 

5、v-mode 双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode 双向绑定</title>
</head>
<body>
​
<div id="app">
    {{text}}
    <br>
    输入的文本：<input type="text" v-model="text">
​
    <hr>
    性别：
    <input type="radio" name="sex" value="男" v-model="flag">男
    <input type="radio" name="sex" value="女" v-model="flag">女
    <br>
    选中了谁：{{flag}}
​
    <hr>
    下拉框：
    <select name="" id="" v-model="selected">
        <option value="" disabled>-- 请选择 --</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
    <br>
    选中了谁：{{selected}}
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            text: 'message',
            flag: '男',
            selected: '',
        }
    });
</script>
</body>
</html>
View Code

 

6、vue 组件及数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 组件及数据绑定</title>
</head>
<body>
​
<div id="app">
    <!--v-bind: 属性不能使用驼峰命名-->
    <reflect v-for="item in items" v-bind:reflect_data="item"></reflect>
</div>
​
<script src="../js/vue.min.js"></script>
<script>
    //定义一个 Vue 组件
    Vue.component('reflect', {
        props: ['reflect_data'],
        template: '<li>{{reflect_data}}</li>'
    })
    const vm = new Vue({
        el: '#app',
        data: {
            items: ['java', 'php', 'js']
        }
    });
</script>
</body>
</html>
View Code

 

7、Vue-axios 基本格式

准备一个json

{
  "name": "狂神说java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com"
    }
  ]
}
View Code

 

axios应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-axios 基本格式</title>
</head>
​
<style>
    /*解决加载数据时显示模板问题，在填充数据之前隐藏*/
    [v-cloak] {
        display: none;
    }
</style>
<body>
​
<div id="app" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">{{info.url}}</a>
    <hr>
    <li v-for="item in info.links">
        <a v-bind:href="item.url">{{item.name}}</a>
    </li>
</div>
​
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                info: { //请求返回去参数格式必须和 json 字符串一样
                    name: '',
                    url: '',
                    page: '',
                    isNonProfit: '',
                    address: {
                        street: '',
                        city: '',
                        country: '',
                    },
                    links: []
                }
            }
        },
        mounted() { //钩子函数
            axios.get('../json/data.json').then(res => {
                this.info = res.data;
            })
        }
    });
</script>
</body>
</html>
View Code

 

8、Vue 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 计算属性</title>
</head>
<body>
​
<div id="app">
    {{message}}
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue !'
        },
        methods: {
            currentTime1: function () { //返回当前时间戳
                return Date.now();
            }
        },
        /**
         * 调用方法时，每次都需要进行计算，既然有计算过程必然会产生系统开销。
         * 那如果这个结果是不经常变化的呢？
         * 此时就可以考虑将这个结果缓存起来，采用计算属性就可以很方便的做到这点。
         * 计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销
         */
        computed: { //计算属性，与 methods 中的方法不能重名，重名之后只会调用 methods 中的方法
            //currentTime2 是一个属性
            currentTime2: function () {
                return Date.now();
            }
        }
​
    });
</script>
</body>
</html>
View Code

 

9、slot 插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 插槽</title>
</head>
<body>
​
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items>
    </todo>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    // slot 插槽组件
    Vue.component('todo', {
        template: `
            <div>
                <slot name="todo-title"></slot>
                <ul>
                    <li><slot name="todo-items"></slot></li>
                </ul>
            </div>`
    })
​
    Vue.component('todo-title', {
        props: ['title'],
        template: `
            <div>{{title}}</div>`
    })
​
    Vue.component('todo-items', {
        props: ['item'],
        template: `
            <li>{{item}}</li>`
    })
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'java系列课程',
            items: ['javaSE', 'linux', 'redis', 'mysql']
        }
    });
</script>
</body>
</html>
View Code

 

10、自定义事件分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件分发</title>
</head>
<body>
​
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :item="item"
                    @remove1="removeItem(index)"></todo-items>
    </todo>
</div>
​
<script src="../js/vue.min.js"></script>
​
<script>
    // slot 插槽
    Vue.component('todo', {
        template: `
            <div>
                <slot name="todo-title"></slot>
                <ul>
                    <li><slot name="todo-items"></slot></li>
                </ul>
            </div>`
    })
​
    Vue.component('todo-title', {
        props: ['title'],
        template: `
            <div>{{title}}</div>`
    })
​
    Vue.component('todo-items', {
        props: ['item', 'index'],
        template: `
            <li>{{item}}
                <button @click="remove()"> -</button>
            </li>`,
        methods: {
            remove: function () {
                this.$emit('remove1') //自定义事件分发
            }
        }
    })
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'java系列课程',
            items: ['javaSE', 'linux', 'redis', 'mysql']
        },
        methods: {
            removeItem: function (index) {
                console.log('删除了 ' + this.items[index] + ' 元素');
                //数组操作：splice(n,m,'a'...) 删除第 n 个元素后面的 m 个元素，并追加 a... 等元素
                this.items.splice(index, 1) //删除当前元素
            }
        }
    });
</script>
</body>
</html>
View Code

 

 

posted @ 2021-07-10 12:06  kaisheng_reflect  阅读(62)  评论(0)  编辑  收藏  举报