Vue 入门

HcodeBlogger

发布于 2020-07-14 10:56:00

2930

发布于 2020-07-14 10:56:00

导入js

使用CDN

COPYhttps://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js

https://cdn.bootcss.com/vue/2.5.21/vue.min.js

COPY<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>

COPY<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>



        <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app", #绑定元素
                data:{  #数据操作
                    message: "hello,vue!"
                }
            });
        </script>
    </body>
</html>

部分if，for，双向绑定操作

COPY<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            {{message}}
            <h1 v-if="ok">YES</h1>
            <h1 v-else>NO</h1>
            <li v-for="item in items">
                {{item.msg}}
            </li>
            <button v-on:click="sayHi">click me</button><br>
           请输入： <input type="text" v-model="inputMsg">{{inputMsg}}
        </div>




        <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    message: "hello,vue!",
                    ok: true,
                    items: [
                        {msg: 'Himit_ZH真帅'},
                        {msg: 'Himit_ZH真厉害'},
                    ],
                    inputMsg: ""
                },
                methods: { //vue方法必须定义在这里面
                    sayHi: function () {
                        alert(this.message);
                    }
                }
            });
        </script>
    </body>
</html>

Vue组件操作

COPY<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--给模板组件传值,把值赋给titem，方便vm调用-->
          <hcode v-for="item in items" v-bind:titem="item"></hcode>
        </div>



        <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
        <script>
            //自定义标签 模板组件
            Vue.component("hcode",{
                /*通过props获取*/
                props: ['titem'],
                template: '<li>{{titem}}</li>'
            })
            var vm = new Vue({
                el: "#app",
                data:{
                    items: [
                        'Himit_ZH真帅',
                        'Himit_ZH真厉害',
                    ],

                },
            });
        </script>
    </body>
</html>

Axios网络通信

COPY<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*解决闪烁问题*/
            [v-clock]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-clock>
           <div>{{info.name}}</div>
            <li v-for="tag in info.tag">{{tag}}</li>
        </div>



        <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data(){
                    return{
                        //请求的返回参数格式必须和json字符串一样
                        info:{
                            name: null,
                            tag: [],
                        }
                    }

                },
                mounted(){ //钩子函数
                    axios.get('data.json').then(response=>(this.info=response.data))
                },
                computed:{ //计算属性：methods和computed方法名不能重复，重名只调用methods，用于不经常变化的属性，类似缓存

                }
            });
        </script>
    </body>
</html>

打包模块化的js

先下载webpack打包工具

首先得有npm工具，这个可以一键下载nodejs，会自带npm工具。

COPYnpm install webpack
npm install webpack-cli

创建目录

在modules里面编写js

hello.js为模块js：需要导出

COPYexports.sayHi = function () {
    document.write("<h1>hcode</h1>")
}

main.js为主模块js：负责引入调用方法即可

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

然后使用webpack.config.js进行打包

COPYmodule.exports = { //导出生成
    entry: './modules/main.js', //引入主模块js
    output: {
      filename: "./js/bundle.js" //生成js的路径
    }
};

在本目录使用命令 webpack

最后便会在本目录生成一个dist文件夹里面就会有js/bundle.js，一个压缩好的可以调用的js。

COPY!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!})},n.t=function(e,t){if(&t&&(e=n(e)),&t)return e;if(&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!,value:e}),&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=)}([function(e,t,n){n().sayHi()},function(e,t){t.sayHi=function(){document.write("<h1>hcode</h1>")}}]);

测试调用

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

创建Vue工程

在cmd进入目录，执行vue init webpack 项目名
进入该项目，执行npm install 安装项目所需的依赖

Vue-router路由

如果创建vue项目没有选择下载的话，就在vue项目的根目录使用cmd命令导入

COPYnpm install vue-router --save-dev

现在vue工程的main.js导入下载好的Vue-router，顺便导入router.js配置路由路径的文件

先在src/components创建对应的组件。

Content.vue

COPY ```html
 <template>
   <h1>内容页</h1>
 </template>

 <script>
     export default {
         name: "Content"
     }
 </script>

 <style scoped>

 </style>

 ```

Main.vue

COPY ```
 <template>
     <h1>首页</h1>
 </template>

 <script>
     export default {
         name: "Main"
     }
 </script>

 <style scoped>

 </style>

 ```

在src下创建一个router文件夹，里面创建一个index.js来配置路由

COPYimport Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content"; //导入组件
import Main from "../components/Main"; //导入组件

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/content',
      //跳转的组件
      component: Content,
      //组件名
      name: 'content'
    },
    {
      path: '/main',
      name: 'main',
      component: Main
    }
  ]
});

到App.vue加上组件的路由链接和内容显示COPY <template> <div id="app"> <h1>Vue-Router</h1> //路由链接和显示 <router-link to="/main">首页</router-link> <router-link to="/content">内容页</router-link> <router-view></router-view> </div> </template> <script> import Content from './components/Content' export default { name: 'App', components: { Content } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

最后配置main.js

COPY   import Vue from 'vue'
   import App from './App'
   import VueRouter from 'vue-router'
   import router from './router' //自动扫描路由配置
   Vue.config.productionTip = false
   Vue.use(VueRouter); //显示声明

   new Vue({
     el: '#app',
     //配置路由
     router, //配置
     components: { App },
     template: '<App/>'
   })

启动项目测试

COPYnpm run dev

Element-UI

官网：https://element.eleme.cn/#/zh-CN/component/installation

安装

进入Vue项目目录，用CMD执行下面的命令下载

COPYnpm i element-ui -S

安装SASS加载器

COPYcnpm install sass-loader node-sass --save-dev

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020年6月27日，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Vue 入门

Vue 入门

导入js

部分if，for，双向绑定操作

Vue组件操作

Axios网络通信

打包模块化的js

先下载webpack打包工具

创建目录

在modules里面编写js

然后使用webpack.config.js进行打包

测试调用

创建Vue工程

Vue-router路由

Element-UI

安装

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐