VUE入门

Posted 2020-11-30 xiaoruirui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE入门相关的知识，希望对你有一定的参考价值。

v-on注册事件

注册点击事件两种方式

  使用v-on指令注册事件
      <标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
    简写方式
      <标签 @事件句柄="表达式或者事件处理函数"></标签>

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{a}}
        <button v-on:click="a++" value="点击">点击</button>>
        <button v-on:click="add" value="点击">点击</button>>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                a:0
            },
            methods:{
//通过方法调用
                add(){
                    alert(1);
                }
            }
        })
    </script>
</body>
</html>

View Code

组件

组件可以扩展 HTML 元素，封装可重用的代码，可以通过该方式自定义我们的标签

全局组件

 Vue.component("mytag",{
            template:"<h1>我的全局组件</h1>"
        })

来定义全局组件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <mytag></mytag>
    </div>
    <script>
        Vue.component("mytag",{
            template:"<h1>我的全局组件</h1>"
        })
        new Vue({
            el:"#app",
            data:{
            }
        })
    </script>
</body>
</html>

View Code

局部组件

在new Vue()中添加和data评级的熟悉

 components:{
                "mytemplate":{
                    template:"#mytemplate",
                    //定义局部属性的数据方式
                    data : function(){
                        return {
                            "name":"11",
                        }
                    }
                }

            },

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <mytag></mytag>
    </div>

    <div id="app1">
        {{name}} <mytemplate></mytemplate>
    </div>

    <div id="app2">
         <myscript></myscript>
    </div>

    <template id="mytemplate">
        <input type="text">
    </template>
    <script type="text/template" id="myscript">
        <input type="text">
    </script>
    <script>
        new Vue({
            el:"#app",
            data:{
            },
            components:{
                "mytag":{
                    template:"<h1>方式1</h1>"
                }
            },
        })
        new Vue({
            el:"#app1",
            data:{
            },
            components:{
                "mytemplate":{
                    template:"#mytemplate",

                    data : function(){
                        return {
                            "name":"11",
                        }
                    }
                }
            },
        })
        new Vue({
            el:"#app2",
            data:{
            },
            components:{
                "myscript":{
                    template:"#myscript"
                }
            },
        })
    </script>
</body>
</html>

View Code

路由（可以去官网上下载）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
    <script>
        // 可以从其他文件 import 进来
        const Foo = { template: ‘<div>foo</div>‘ }
        const Bar = { template: ‘<div>bar</div>‘ }

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点再讨论嵌套路由。
        const routes = [
            { path: ‘/foo‘, component: Foo },
            { path: ‘/bar‘, component: Bar }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
            routes // (缩写) 相当于 routes: routes
        })


        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
            router
        }).$mount(‘#app‘)
    </script>
</body>
</html>

View Code

webpack

本地安装：

npm install webpack --save-dev

全局安装：

npm install -g webpack

安装好过后需要重新启动配置文件

创建前端项目

npm init -y

技术图片

a.js
var a = "a模块";
b.js
define(function () {
    var b = "b模块";
    return b;
});

打包：webpack src/a.js -o dist/bundle.js直接打包

然后直接引入就可以了，通过这个命名我们会创建一个dist文件夹，里面会生成bundle.js所以

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/bundle.js"></script>
</head>
<body>
</body>
</html>

也可以通过创建一个和package平级的文件webpack.js

技术图片

这是内容

var path = require("path");
module.exports = {
entry: ‘./src/main.js‘,
output: {
path: path.resolve(__dirname, ‘./dist‘),
filename: ‘bundle.js‘
}
}

这样的话只需要输入webpack就可以打包了

css打包随便写一个css文件

安装两个插件

npm install style-loader --save-dev

npm install css-loader --save-dev

并且在webpack.js添加

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

View Code

输入webpack就可以了