Vue02

最新推荐文章于 2024-02-29 21:18:07 发布

秃然爆发

最新推荐文章于 2024-02-29 21:18:07 发布

阅读量99

点赞数

分类专栏：框架文章标签： vue

本文链接：https://blog.csdn.net/qq_41786506/article/details/103763402

版权

框架专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue增强

Vue事件v-on

语法：<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>
或<标签 @事件句柄=“表达式或者事件处理函数”></标签>
例如：

<button v-on:click="countSum()">点击1</button>

或者：

<button @click="countSum()">点击3</button>

内联事件处理函数

语法:
使用v-on指令注册事件
<标签 v-on:事件句柄=“内联函数(实际参数)”></标签>
简写方式
<标签 @事件句柄=“内联函数(实际参数)”></标签>

<button @click="say('今天天气好冷了')">点击5</button>

计算属性 computed

防止内容过长或者不够优雅和方便后期维护

  var vm = new Vue({
      el:"#app",
      data:{
          birthday:1429032123201 // 毫秒值
      },
     computed :{
          birth(){// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }
  })

2 Watch

watch可以让我们监控一个值的变化，从而做出反应

<div id="app">
      <input type="text" v-model="message">
  </div>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>

Vue组件

全局组件：任意地方都可以使用,任意挂载的标签都使用

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<script>
    //全局组件
    Vue.component("mycomponet1",{
        template:"<h1>这个字好大1111111</h1>"
    });

    var mycomponet2={
        template:"<h1>这个字好大222222</h1>"
    }
    Vue.component("mycomponet2",mycomponet2);

    new Vue({
        el:"#app1"
    });

    new Vue({
        el:"#app2"
    });
</script>
</body>

局部组件：只能在当前挂在的标签里面用

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
</div>
<script>
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件111</h2>"
            },
            "mycomponet2":{
                template:"<h2>这是一个局部的组件222</h2>"
            }
        }
    });

    new Vue({
        el:"#app2"
    });
</script>
</body>

组件里模板的写法

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
</div>
<!--通过template标签
<template id="mytemplate">
    <h3>这是一个template写法1</h3>
</template>-->
<script type="text/template" id="mytemplate">
    <h1>template标签中的htmlssssssssssssssss</h1>
</script>
<script>


    // 写法一:直接template写字符串
  /*  new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件111</h2>"
            }
        }
    });*/
    //写法二:
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"#mytemplate"
            }
        }
    });
</script>

注意：模板里面得数据必须是函数

components:{
            "mycomponet1":{
                template:"#mytemplate",
                data:function(){
                    return {
                        "name":"用户名"
                    }
                }
            }
        }

路由

路由是什么？
路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。

如何使用

（1）、安装路由

	npm install vue-router
	npm uninstall vue-router

（2）、引入vue-router.js文件
（3）、挂载到一个dom元素上，定义路由出口

<div id="app1">
    <!--相当于a标签 long 龙哥的组件-->
    <router-link to="/">首页</router-link>
    <router-link to="/aaa">aaa</router-link>
    <router-link to="/bbb">bbb</router-link>
    <router-link to="/ccc">ccc</router-link>
    <!-- 路由出口-->
    <router-view></router-view>
</div>
<script>
    //定义组件
    var index = Vue.component("index",{
        template:"<h1>首页</h1>"
    });
    var longCp = Vue.component("aaa",{
        template:"<h1>大家好,aaa</h1>"
    });

    var chengCp = Vue.component("bbb",{
        template:"<h1>大家好,bbb</h1>"
    });

    var jinbo = Vue.component("ccc",{
        template:"<h1>大家好,ccc</h1>"
    })
    //创建一个路由
   var routes1 =  new VueRouter({
        routes:[{
           path:"/",
            component:index
        },{
            path:"/aaa",
            component:aaa
        },{
            path:"/bbb",
            component:bbb
        },{
            path:"/ccc",
            component:ccc
        }]
    });
    //把路由挂载到vue对象上面去
    new Vue({
        el:"#app1",
        data:{
          "name":"用户名1111"
        },
        router:routes1
    });


</script>

Vue脚手架 vue-cli

如何使用：
(1) 安装脚手架
npm install -g vue-cli

(2)创建一个项目

(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
… no

(4)运行命令
npm run dev
npm run build 打包可以在服务器运行

项目入口：/build/webpack.base.config.js中的module.export

秃然爆发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue02

Vue增强Vue事件v-on语法：<标签 v-on:事件句柄=“表达式或者事件处理函数”></标签>或<标签 @事件句柄=“表达式或者事件处理函数”></标签>例如：<button v-on:click="countSum()">点击1</button>或者：<button @click="countSu...
复制链接

扫一扫