导入js

使用CDN

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

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

<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<!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,双向绑定操作

<!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组件操作

<!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网络通信

<!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工具。

npm install webpack
npm install webpack-cli

创建目录

在modules里面编写js

  • hello.js为模块js:需要导出
exports.sayHi = function () {
    document.write("<h1>hcode</h1>")
}
  • main.js为主模块js:负责引入调用方法即可
var hello =require("./hello");
hello.sayHi();

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

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

在本目录使用命令 webpack

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

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&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=0)}([function(e,t,n){n(1).sayHi()},function(e,t){t.sayHi=function(){document.write("<h1>hcode</h1>")}}]);

测试调用

<!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命令导入

npm install vue-router --save-dev
  1. 现在vue工程的main.js导入下载好的Vue-router,顺便导入router.js配置路由路径的文件

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

Content.vue

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

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

 <style scoped>

 </style>

 ```

Main.vue

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

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

 <style scoped>

 </style>

 ```
  • 在src下创建一个router文件夹,里面创建一个index.js来配置路由
import 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加上组件的路由链接和内容显示
       <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

   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. 启动项目测试
npm run dev

====================================================================================================================================================

Element-UI

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

安装

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

npm i element-ui -S

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

评论