首页 > 其他分享 >Vue02

Vue02

时间：2023-07-04 21:26:41浏览次数：51  
标签：vue 自定义 Vue02 app Vue 组件 data

1.Vue计算属性和watch监听

1.1.计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>您的生日是：{{birth}} </h1>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            birthday:1429038888888 // 毫秒值
        },
        computed:{ //计算属性
            birth(){ //计算属性的函数，函数返回值即为计算过的属性的值
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    });
</script>
</html>

1.2.watch

  • watch可以让我们监控一个值的变化。从而做出相应的反应。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue.js  -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(newv,oldv){
                console.log(newv,oldv);
            }
        }
    });
</script>
</html>

2.组件化

2.1.什么是组件化

  • 也称之为自定义组件
  • 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航、底部信息。
  • 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
  • 在vue里，所有的vue实例都是组件

2.2.全局组件

  • 我们通过Vue的component方法来定义一个全局组件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js    -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>

    <!--  第一个vue实例的作用域  -->
    <!-- 2.设置vue的作用域   -->
    <div id="app">
        {{name}}
        <!--  使用自定义全局组件  -->
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>

    </div>

    <hr>

    <!-- 这是第二个vue实例的作用域  -->
    <div id="bbb">
        {{name}}
        <counter></counter>
    </div>
</body>

<script>

    //自定义全局组件,可以在多个Vue的作用域中使用
    //参数1：自定义组件的名称，就是使用自定义组件的时候的名称
    //参数2：自定义组件中封装的标签，以及标签所需的属性数据
    Vue.component(
        "counter",
        {
            template: "<button v-on:click='count++'>你点了{{count}}次，我记住了</button>",  //自定义组件封装的标签
            data(){ //设置自定义组件封装的标签所使用的模型数据，因为data()是函数，所以模型数据需要作为函数的返回值进行操作
                return { //返回模型数据对象  {}在vue中表示对象
                    count: 0
                }
            }
        }
    )


    //3.创建vue实例，第一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            name: "vue作用域-app"
        }
    })

    //构建第二个vue实例，并设置了vue的作用域
    var bbb = new Vue({
        el: "#bbb",
        data:{
            name: "vue作用域-bbb"
        }
    })
</script>


</html>
  • 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
  • 组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
  • 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
  • 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
  • data必须是一个函数，不再是一个对象。

2.3.组件的复用

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>
  • 当我们定义这个 <counter> 组件时，它的data 并不是像之前直接提供一个对象：
data: {
  count: 0
}
  • 取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
data() {
  return {
    count: 0
  }
}

2.4.局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js    -->
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>

    <!--  第一个vue实例的作用域  -->
    <!-- 2.设置vue的作用域   -->
    <div id="app">
        {{name}}
        <aa></aa>
        <aa></aa>
    </div>

    <hr>

    <!-- 这是第二个vue实例的作用域  -->
    <div id="bbb">
        {{name}}
        <aa></aa>
    </div>
</body>

<script>

    //构建自定义局部组件，必须注册到对应vue实例中，才能在对应的vue作用域中使用
    const conuter={
        template: "<button v-on:click='count++'>你点了{{count}}次，我记住了</button>",
        data(){
            return {
                count:0
            }
        }
    }

    //3.创建vue实例，第一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            name: "vue作用域-app"
        },
        components:{ //注册局部组件
            aa: conuter  // key : 自定义局部组件对象，key就是使用的自定义局部组件的标签名
        }
    })


    //构建第二个vue实例，并设置了vue的作用域
    var bbb = new Vue({
        el: "#bbb",
        data:{
            name: "vue作用域-bbb"
        }
        //没有注册自定义局部组件，不能使用
    })
</script>


</html>
  • components就是当前vue对象子组件集合。命名：key:value
    • 其key就是子组件名称
    • 其value就是组件对象名
  • 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用

2.5.组件通信

  • 通常一个单页应用会以一棵嵌套的组件树的形式来组织：

image

  • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
  • 左侧内容区又分为上下两个组件
  • 右侧边栏中又包含了3个子组件
  • 各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求

2.5.1.props（父向子传递）

  1. 父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
  2. 子组件通过props接收父组件数据，通过自定义属性的属性名
父组件使用子组件，并自定义了title属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!-- 父组件在使用子组件时，给子组件传递数据 -->
<!-- 父组件在使用子组件的时候，使用的自定义属性 -->
<!--父组件-->
<div id="app">
    <h1>打个招呼：</h1>
    <!-- 子组件调用  -->
    <counter :title="sj"></counter>
</div>

</body>

<script>

    //子组件，在构建子组件时，就定义规范了，父组件可以传递给子组件什么数据，子组件就可以使用。
    Vue.component(
        "counter", //全局组件的使用名称，自定义
        {
            template: '<h1>{{title}}</h1>',
            props:['title'] //接收父组件在使用子组件是定义的属性，交给子组件进行使用
        }
    )


    var app = new Vue(
        {
            el: "#app",
            data:{
                sj:"大家好"
            }
        }
    )

</script>

</html>

2.5.2.props验证

  • 我们定义一个子组件，并接收复杂数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>开设如下课程：</h2>
        <!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons -->
        <my-list :items="lessons"/>
    </div>

</body>

<script>

    const myList = {
        template: '<ul><li v-for="item in items">{{item.id}} : {{item.name}}</li></ul>',
        props: {
            items: {
                type: Array,
                default: [],
                required: true
            }
        }
    };

    var app = new Vue({
        el:"#app",
        components:{
            myList // 当key和value一样时，可以只写一个，驼峰式命名使用时需要使用-分隔，比如：myList 使用时为 my-list
        },
        data:{
            lessons:[
                {id:1, name: 'java'},
                {id:2, name: 'php'},
                {id:3, name: 'ios'}
            ]
        }
    });

</script>

</html>
  • 这个子组件可以对 items 进行迭代，并输出到页面。
  • props：定义需要从父组件中接收的属性
    • items：是要接收的属性名称
      • type：限定父组件传递来的必须是数组
      • default：默认值
      • required：是否必须

2.5.3.子向父的通信：$emit

  • 子组件向父组件通信，本质上就是在子组件中调用父组件的函数，修改父组件的内容。
  • vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>


<!-- 父组件在使用子组件时，子组件向父组件传递数据 -->
<div id="app">
    <!--  num是父组件传递给子组件使用的，只能在子组件中使用，不能在父组件中使用 -->
    <!--  如果想要在父组件中使用num,必须由子组件传递给父组件，才能使用  -->
    <!--  子组件接收到父组件中数据之后，默认是不允许进行传递修改的  -->
    <h1>num: {{num}}</h1>

    <!-- :num是通过属性绑定的方式将vue实例定义的num变量和子组件需要的num属性进行绑定，最终使用双向绑定方式进行数据通信 -->
    <!-- @inc是绑定了父组件的方法，给子组件进行使用   -->
    <counter :num="num" @inc="increment" @dec="decrement"></counter>
</div>



</body>

<script>

      //构建组件  子组件
      Vue.component(
          "counter", // 组件名称
          { //组件封装的内容
            template:'\
             <div>\
                <button @click="plus">加{{number}}</button>  \
                <button @click="reduce">减</button>  \
             </div>', //组件封装的内容中设置的是点击事件，对num数据进行++或者--操作
             props:['number'],  //定义了父组件向子组件传递的数据的属性名称
             methods:{
                plus(){
                    this.$emit("inc"); // 实现了子组件自定义方法的定义，定义了再使用子组件时可以绑定的事件名称
                },
                reduce(){
                     this.$emit("dec");
                }
             }
          }
      )

    var app = new Vue(
        {
            el: "#app",
            data:{
                num:0
            },
            methods:{ //父组件中定义的操作num变量的方法
                increment(){
                    this.num++;
                },
                decrement(){
                    this.num--;
                }
            }
        }
    )
</script>

</html>

3.路由vue-router

  • 一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换

3.1.编写父组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span>登录</span>
    <span>注册</span>
    <hr/>
    <div>
        登录页/注册页
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app"
    })
</script>
</body>
</html>

image

3.2.编写登录及注册组件

3.2.1.login.js

const loginForm = {
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密&emsp;码：<input type="password"><br/>\
    </div>\
    '
}

3.2.2.register.js

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用户名：&emsp;<input type="text"><br/>\
    密&emsp;码：&emsp;<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

3.2.3.在父组件中引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
</head>
<body>

    <div id="app">
        <span>登录</span>
        <span>注册</span>
        <hr/>
        <div>
            <login-form></login-form>
            <register-form></register-form>
        </div>
    </div>

</body>

<script>

    var vm = new Vue({
        el:"#app",
        components:{
            loginForm,
            registerForm
        }
    })

</script>

</html>

image

  • 我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

  • 但是，如何才能动态加载组件，实现组件切换呢？

  • 虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

3.3.vue-router简介和安装

  • 使用vue-router和vue可以非常方便的实现 复杂单页应用的动态路由功能。

  • 官网：https://router.vuejs.org/

  • 使用npm安装：npm install vue-router@2 --save

image

  • 在html中引入依赖
<script src="node_modules/vue-router/dist/vue-router.js"></script>

3.4.路由的简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
</head>
<body>

    <div id="app">
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
            <!--vue-router的锚点-->
            <router-view></router-view>
        </div>
    </div>

</body>

<script>
    // 创建VueRouter对象
    const router = new VueRouter({
        routes:[// 编写路由规则
            {
                path:"/login", // 请求路径，以“/”开头
                component:loginForm // 组件名称
            },
            {
                path:"/register",
                component:registerForm
            }
        ]
    })

    var vm = new Vue({
        el:"#app",
        components:{
            loginForm,
            registerForm
        },
        router // 创建VueRouter对象
    })

</script>

</html>

4.vue的网络请求

4.1.安装axios

npm install axios

image

4.2.引入json文件

在项目的根目录下创建chart.json，内容如下：

[{
    "proid":1,
    "proname":"U盘",
	"pronum":1
},{
    "proid":2,
    "proname":"华为P40",
	"pronum":3
}]

4.3.编写代码进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
</head>
<body>

    <div id="app">
        <li v-for="pro in products">
            {{pro.proid}}--{{pro.proname}}--{{pro.pronum}}
        </li>
    </div>

</body>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            products:[]
        },
        created:function () {//钩子函数
            axios.get('chart.json')
                .then(function (response){
                	//这里不能使用this,因为this表示axios对象，需要使用app操作vue对象的数据
                    app.products=response.data
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
        }

    })
</script>

</html>

5.使用vue脚手架搭建项目

5.1.在终端输入以下命令

以管理员身份打开cmd命令窗口，输入以下指令

  • npm install -g webpack --save-dev 安装webpack

  • npm install -g webpack-cli --save-dev 安装webpack-cli

  • webpack -v 查看webpack版本

  • npm install -g @vue/cli 安装vue-cli

  • npm install -g @vue/cli-init 安装vue-cli-init

  • vue -V 查看vue版本

  • 进入到计划存放项目的目录中

  • vue init webpack 项目名称（纯小写）

image

  • 通过Idea查看项目
    image

  • 在IDEA的终端执行

    • cd vuestage
    • npm run dev 启动项目

image

image

image

关闭项目ctrl+c

标签：vue,自定义,Vue02,app,Vue,组件,data
From： https://www.cnblogs.com/jiabaolatiao/p/17527041.html

相关文章

  • vue02
    今日内容概要插值语法文本指令属性指令事件指令class和style条件渲染列表渲染今日内容详细插值语法vue的mvvm架构演示<!DOCTYPEhtml><htmllang="en"><he......
  • day05-Vue02
    Vue027.修饰符7.1基本说明修饰符（Modifiers）是以.指明的后缀，指出某个指令以特殊方式绑定官方文档：修饰符Vue中的修饰符有：事件修饰符按键修饰符系统修饰符事件修......
  • vue02
    1.基本1.node.js是服务器(容器),是管理依赖的,跟tomcat差不多,帮助连接数据库2.安装npm,为了下载依赖-->在终端输入npminit-->生成package.json文件(相当于maven......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99