Vue初步

最新推荐文章于 2024-08-08 15:28:54 发布

小馒头爱学Java

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量93

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45769329/article/details/120884668

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<div id="app">
        {{message}}
    </div>-->
    <div id="app" v-bind:title="message" style="width: 100px; height: 100px; background-color: green">
    </div>

    <!--导入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,Vue!"
            }
        });
</script>
</body>
</html>

2. if—else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层-->
    <div id="app">
        <h1 v-if="ok">Yes</h1>
        <h1 v-else>No</h1>
    </div>

    <!--导入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
            }
        });
</script>
</body>
</html>

3.for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层-->
    <div id="app">
        <li v-for="item in items"> 
            {{item.message}}
        </li>
    </div>

    <!--导入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'},
                   {message: 'C'}
               ]
            }
        });
</script>
</body>
</html>

4.绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层-->
    <div id="app">
        <button v-on:click="sayHello">button</button>
    </div>

    <!--导入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,Vue!"
            },
            methods: {
                sayHello: function (){
                    alert(this.message)
                }
            }
        });
</script>
</body>
</html>

5.双向绑定（Vue的精髓）

6.Vue组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层-->
    <div id="app">
        <mycomponent v-for="item in items" v-bind:mes="item"></mycomponent>
    </div>

    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        // 定义一个Vue组件component(名字，对象）
        Vue.component("mycomponent",{
            props: ['mes'],
            template: '<li>{{mes}}</li>'
        });
        var vm=new Vue({
            el: "#app",
            data: {
                items: ["Java","Linux","Spring"]
            }
        });
</script>
</body>
</html>

7.Axios异步通信

data.json

{
  "name": "Java",
  "url": "https://www.baidu.com",
  "address": {
    "country": "China",
    "city": "浙江杭州",
    "street": "白杨街道"
  }
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!--view层-->
    <div id="vue" v-cloak> <!--v-cloak解决模板加载出现的问题-->
        <div>{{info.name}}</div>
        <div>{{info.address.country}}</div>
        <a v-bind:href="info.url">百度</a>
    </div>

    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var vm=new Vue({
            el: "#vue",
            data(){
              return{
                  info:{
                      name: null,
                      address: {
                          country: null,
                          city: null,
                          street: null
                      },
                      url: null
                  }
              }
            },
            mounted(){
                axios.get('data.json').then(response=>(this.info=response.data))
            }
        });
</script>
</body>
</html>

8.slot插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!--view层-->
    <div id="vue" v-cloak> <!--v-cloak解决模板加载出现的问题-->
        <todo>
            <todo-title slot="todo-title":title="title"></todo-title>
            <todo-items slot="todo-items" v-for="msg in todoItems":item="msg"></todo-items>
            <!--取出遍历出来的每一个msg赋给item，item是
             Vue.component("todo-items",{
                props: ['item'],
                template: '<li>{{item}}</li>'
            }); 中props取出的值的参数名
            -->
        </todo>
    </div>

    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
        // slot插槽，todo组件里面插入了两个组件
        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: '<li>{{item}}</li>'
        });
        var vm=new Vue({
            el: "#vue",
            data: {
                title: 'study',
                todoItems: ['hello.Java','hello,Linux','hello,Spring']
            }
        });
</script>
</body>
</html>

9.自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="vue" v-cloak> <!--v-cloak解决模板加载出现的问题-->
        <todo>
            <todo-title slot="todo-title":title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(msg,index) in todoItems":item="msg"
                        v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
        </todo>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
        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'],
            // button按钮只能绑定当前组件的方法
            template: '<li>{{index}}-----{{item}} <button @click="remove">删除</button></li>',
            methods: {
                remove: function (index){
                    // this.$emit 自定义事件
                    this.$emit('remove',index);
                }
            }
        });

        var vm=new Vue({
            el: "#vue",
            data: {
                title: 'study Vue',
                todoItems: ['hello.Java','hello,Linux','hello,Spring']
            },
            methods: {
                removeItems: function (index){
                    this.todoItems.splice(index,1);
                }
            }
        });
</script>
</body>
</html>

绑定关系

下图中的index数据来自于循环遍历出的

v-bind:index="index"

方法中的index数据来自于 :key="index"

v-on:remove="removeItems(index)" 
:key="index"

10.vue-cli

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板

需要下载环境Node.js,下载对应安装包，并指定安装路径，安装在本地

安装淘宝镜像，安装路径

安装webpack ，此处未用淘宝加速，用的是npm安装

安装cli脚手架3

cli2初始化项目—vue init webpack my-project

cli3初始化项目—vue create my-project

使用cli2方式创建一个项目

手动进行一些设置

切换到当前项目目录、安装依赖、启动项目

11.webpack打包入门

hello.js

// 暴露一个方法
exports.sayHi = function (){
    document.write("<h1>webpack</h1>");
}

main.js

var hello=require("./hello");
hello.sayHi();

webpack.config.js

module.exports = {
    entry: './modules/main.js',
    output: {
        filename: "./js/bundle.js"
    }
}

执行webpack打包命令

小馒头爱学Java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue初步

1.第一个Vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>  <div i
复制链接

扫一扫