Vue 入门

导入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
  1. 现在vue工程的main.js导入下载好的Vue-router,顺便导入router.js配置路由路径的文件
  1. 先在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/>'
   })
  1. 启动项目测试
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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JDK1.8 函数式接口以及lambda表达式

    HcodeBlogger
  • JVM面试常问知识点

    基本结构与之前类似,只是Java8取消了之前的“永久代”,取而代之的是“元空间”——Metaspace,两者本质是一样的。“永久代”使用的是JVM的堆内存,而“...

    HcodeBlogger
  • SSM框架(五)Mybatis的配置和CRUD操作

    MyBatis 是一个半自动化的ORM框架 (Object Relationship Mapping) →对象关系映射

    HcodeBlogger
  • Vue快速入门

    终于进入国内当前最火的前端框架Vue.js的学习了,最近周边的哥们也开始用该框架做线上项目,闲暇之余,做个快速的了解,重在基础部分。 ? 基础概念 目前在国...

    用户1216676
  • vue.js快速上手

      Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。

    笔阁
  • 重学巩固你的Vuejs(下)

    置身世外只为暗中观察!!!Hello大家好,我是魔王哪吒!重学巩固你的Vuejs知识体系,如果有哪些知识点遗漏,还望在评论中说明,让我可以及时更新本篇内容知识体...

    达达前端
  • 【Vue.js】Vue.js项目构建

    魏晓蕾
  • 用后台开发的逻辑理念学习VUE

    近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范...

    Kiba518
  • Vue.js系列之二Vue实例

    每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下: var vm=new Vue({}); {}是创建Vue应用时的参数对象 1、Vue实例...

    郑小超.
  • 如何构建你的第一个 Vue.js 组件

    协作翻译 原文:How to build your first Vue.js component 链接:https://medium.freecodecamp....

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券