Vue的提升

最新推荐文章于 2024-11-11 21:19:25 发布

置顶成许愿

最新推荐文章于 2024-11-11 21:19:25 发布

阅读量173

点赞数

文章标签： java vue

本文链接：https://blog.csdn.net/weixin_45471212/article/details/103374499

版权

文章目录

`Vue`的提升

`Vue`的提升

1`Vue`事件(掌握)

1.1 v-on绑定事件的运用

v-on绑定事件的运用
<div id="app">
    {{num}}
    <button v-on:click="num++">按钮1</button><br/>
    <button @click="num++">按钮2</button><br/>
    <!--//调用方法-->
    <button v-on:click="myclik">按钮3</button><br/>
    <button @click="myclik">按钮4</button><br/>
    <!--//传有参数-->
    <button v-on:click="say('haha')">按钮5</button>

</div>
<script>
  var app=  new Vue({
      el:"#app",
      data:{
          num:0,
      },
      methods:{
          myclik:function () {
              this.num++;
          },
          say(msg){
             console.log("吃饭饭"+msg)
          }
      }
    })
</script>

2 `vue`计算属性&watch(掌握)

2.1计算computed

<div id="app">
    {{birthday}}
    <!--一种方式-->
   {{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
    <!--第二种方式-->
   <H1>{{birth}}</H1>
</div>
<script>
   var app= new Vue({
        el:"#app",
        data:{
            birthday:201112545354,
        },
        computed:{
            birth(){
                return new Date(this.birthday).getFullYear()+"-"+new Date(this.birthday).getMonth();
            }
        }
    })

</script>

2.2 watch 监视

<div id="app">
   名称: <input type="text" v-model="msg"/>

</div>
<script>
   var app= new Vue({
        el:"#app",
        data:{
           msg:"",
        },
       watch:{
            msg(newVal,oldVal){
                console.log("新:"+newVal),
                console.log("老:"+oldVal)
   }
       }
    })

</script>

3 `vue`组件(掌握)

3.1 全局组件component

<div id="app">
   <!-- 全局组件的两种方式-->
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<div id="app1">
   <!-- 全局组件的两种方式-->
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
<script>
    Vue.component("mycomponent1",{
        template:"<h1>这是一个全局的组件component</h1>"
    })
   var mytemplateConfig ={
        template:"<h1>这是一个全局的组件component22222222222222222</h1>\""
   }
    Vue.component("mycomponent2",mytemplateConfig)

   var app= new Vue({
        el:"#app",
        data:{

        },
    })
   var app1= new Vue({
        el:"#app1",
        data:{

        },
    })
</script>

3.2 局部组件

<div id="app">
    <mycomponent1></mycomponent1>
</div>
<div id="app1">
   <!-- 局部组件只在挂载的上面起作用-->
    <mycomponent1></mycomponent1>
</div>
<script>
   var app= new Vue({
       el:"#app",
       data:{

       },
       components:{
           mycomponent1:{
               template:"<h1>这是一个局部组件</h1>"
           }}

   })

   var app1= new Vue({
       el:"#app1",
       data:{

       },

   })
</script>

3.3 template

<div>
    <!--第一种-->
    <!--<template id="template1">
        <h1>这是template11</h1>
    </template>-->
    
    <!--第二种-->
    <script type="text/template" id="mytemplate">
        <h1>这是template222222222221</h1>
    </script>
</div>

<script type="text/javascript">
   var app= new Vue({
       el:"#app",
       data:{
       },
       components:{
           mycomponent1:{
               template:mytemplate,
           }

       }
   })
</script>

3.4 component 和template的运用

<div id="app">
    <mycomponent1></mycomponent1>
</div>


<div>
    <template id="mytemplate1">
        <form method="post">
            {{name}}<input type="text"/>
            密码:<input type="possword"/>
            <input type="button" @click="login" value="登录" />
        </form>
    </template>

</div>

<script type="text/javascript">
    var mytemplate1={
        template:"#mytemplate1",

        data(){
            return {name:"用户名"};
        }
    }
    Vue.component("mycomponent1",mytemplate1)

   var app= new Vue({
       el:"#app",
       data:{
       },

   })

4 `vue`路由(掌握)

1.路由的安装 :npm run vue-router

2.路由的引入:<script src="node_modules/vue-router/dist/vue-router.js"></script>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!--//定义路由出口-->
<div id="app">
    <router-link to="/"> 首页 </router-link>
    <router-link to="/about"> 关于 </router-link>
    <router-link to="/intro"> 介绍</router-link>
<!--//路由匹配到这里模板渲染到这里-->
    <router-view></router-view>

</div>

<script>
    /*定义主键*/
  var index =  Vue.component("index",{
        template:"<h1>首页1111111111111</h1>"
    })
  var about =  Vue.component("about",{
        template:"<h1>关于11111111111111</h1>"
    })
  var intro =  Vue.component("intro",{
        template:"<h1>介绍1111111111</h1>"
    })
//创建路由

 var router = new VueRouter({
      routes:[
          {path:"/", component:index},
          {path:"/about", component:about},
          {path:"/intro", component:intro},
      ]
      });
//创建vue对象

   var app= new Vue({
       el:"#app",
       router:router
   })
</script>

</body>

5 `webpack`(掌握)

5.1 引入`js`

src文件
a.js
var a = "a模块";
var b = require('./b.js');
console.log(b);
b.js
define(function () {
    var b = "b模块";
    return b;
});
amd模式可以但是commonjs必须在nodejs环境，浏览器环境不ok
打包：webpack src/a.js -o dist/bundle.js

5.2`引入css`

1 执行命令:
npm install style-loader --save-dev
npm install css-loader --save-dev
2.a.js引入:

var a = "a模块";
var b = require('./b.js');

console.log(b);

require('../css/index.css')
3：在webpack.config.js文件引入下面代码

var path = require("path");
module.exports = {
    entry: './web/js/a.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,     //匹配文件规则
                use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
                // webpack use的配置，是从右到左进行加载的
            },
        ]
    }
}
4：打包：webpack

5.3热更新web服务器

1）安装插件：npm install webpack-dev-server --save-dev
2）添加启动脚本
在package.json中配置script
      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config ./webpack.conf.js",      },
 命令:  npm run dev/test  
 出现错误后
  "devDependencies": {
  "css-loader": "^3.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
},

6`vue-cli`-脚手架

cli脚手架3详细的链接
https://segmentfault.com/a/1190000016423943
安装这个新 vue-cli 3.0.3 的包：
1.安装命令：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.vue --V检查版本
3.会让你选择默认（default）还是手动（Manually），（注：现在vue-cli3.0默认使用yarn下载）
4.vue create vue-webpack-demo
5.启动命令
// 51. 进入项目
cd vue-webpack-demo 
// 或者 cd vue-webpack-demo2
// 52. 安装依赖
npm i
// 53. 启动
npm run serve