原生 vue.js 快速笔记

最新推荐文章于 2024-05-21 12:22:33 发布

丰色木夕

最新推荐文章于 2024-05-21 12:22:33 发布

阅读量184

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/youlinhuanyan/article/details/100433588

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、最简单的demo `Hello world`

先下载vue.js vue官方库

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="my-vue">
            <span>{{ message }}</span>
            <button v-on:click="show"> click me</button>
            <hr />
            <input v-model="msg" />
            <p>{{msg}}</p>
            <hr />
            <a :href="url"> click me</a> 
        </div>
    </body>

    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        var mydate = {
            message: 'Hello World!',
            msg: 'this is msg',
            url: '/user/#abc'
        };
        new Vue({
            el: '#my-vue',
            data: mydate,
            methods: {
                show: function () {
                    alert('run show method.')
                } 
            }
        });
    </script>

1. Vue实例解释

 new Vue({
            el: '#my-vue',  //这是view的元素id与html对应
            data: mydate,   //这是数据
            methods: {      //这是方法
                show: function () {
                    alert('run show method.')
                } 
            }
        });

2. 模板基本语法

文本与Vue实例变量或数据单向绑定

<p> {{ message }} </p>

属性与Vue实例变量或数据单向绑定

<a v-bind:class="{'red':true}" > click me</a> <!-- 完整语法-->
<a :href="url"> click me</a>  <!-- 这是简写，在属性前加一个冒号，表该属性被绑定，绑定到Vue的url变量-->

指令即html中不存在属性，通常以v-xxxx的形式出现，如v-bind,v-for ,v-model v-if等
数据双向绑定 v-model指令

<input v-model="msg"/>

事件与Vue实例的方法绑定

<!--完整语法-->
<button  v-on:click="show"> click me</button >

<!--简写语法-->
<button  @click="show"> click me</button >

二、组件

如何实现一个组件？vue的核心之一便是组件化。每个模块便是一个组件，组件可以有子组件，看下面的组件实现demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>componenet test</title>
    </head>

    <body>
        <div id="my-vue">
            <p>{{ message }}</p>
            <hr >
            <my-component></my-component>
        </div>

        
    </body>
    <template id="childComp">
        <div> {{ message }} </div>
    </template>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        var mydate = {
            message: '我是父Vue',
        };
        var childData = {
            template: '#childComp',
            data: function() {
                return { 
                    message: '这是子组件的内容',
                    abc:'abc'
                };
            }
        }
        new Vue({
            el: '#my-vue',
            components: {
                'my-component' : childData
            },
            data: mydate,
            methods: {
                show: function () {
                    alert('run show method.')
                } 
            }
        });
    </script>
</html>

组件笔记
1）子组件必须绑定到一个<template>标签，这是h5的标签，在浏览页面中是不可见的，可任意放置。
2）子组件的data必须是一个函数，该函数的return返回值则为子组件的数据源
3）子组件中的变量与父组件中的变量，\是相互独立的，子父组件的变量同名时，不会发生冲突
4）<template>内必须只有一个直接子元素，若多于一个，只显示第一个直接子元素，如下:

<template id="child">
   <div> {{ title }} </div>
   <div> {{ message }} </div>
</template>

则只会显示<div> {{ title }} </div> message不会显示，应该成如下所示

<template id="child">
  <div>
   <div> {{ title }} </div>
   <div> {{ message }} </div>
  </div>
</template>

1.父组件通过prop向子组件传递参数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>componenet test</title>
    </head>
    <body>
        <div id="my-vue">
            <p>{{ message }}</p>
            <hr >
            <!-- msg就是了组件中在props中声明的属性变量，父的变量ak将从这里把数据传递进去 -->
            <my-component :msg="ak"></my-component>
        </div>
    </body>
    <template id="childComp">
        <div>
            <div> {{ child_message }} </div>
            <div> <h3>父传来的参数如下:</h3> <div> {{ msg }}</div> </div>
        </div>
    </template>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        var mydate = {
            message: '我是父Vue',
            ak: "父-ak47"
        };

        var childData = {
        //声明变量，声明后，子组件的模板中变可以使用了
            props: ['msg','iso'],
            template: '#childComp',
            data: function() {
                return { 
                    child_message: '这是子组件的内容',
                    child_abc: '子-abc'
                };
            }
        }
        new Vue({
            el: '#my-vue',
            components: {
                'my-component' : childData
            },
            data: mydate,
            methods: {
                show: function () {
                    alert('run show method.')
                } 
            }
        });
    </script>

</html>

prop使用笔记
1）子组件对象中的属性props 用于声明变量，声明后，这些变量就可以直接用在组件模板中了。如msg,iso这两个变量。
2）父的变量值通过在html标签中使用属性绑定的指令，把父的变量绑定到子的属性中，实现参数传递，即在<my-component :msg="ak"> 实现，ak是父组件的变量名，msg是子组件中声明用到的变量名。

2. 子组件通过事件向父组件传递数据

子向通过事件向父传递参数，demo如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>componenet test</title>
    </head>

    <body>
        <div id="my-vue">
            <p>{{ message }}</p>
            <hr >
            <!-- getevnet为自定义的事件，子组件将触发改getevent事件，使父的getChildData方法运行-->
            <my-component :msg="ak" @getevent="getChildData"></my-component>
        </div>
    </body>
    <template id="childComp">
        <div>
            <div> {{ child_message }} </div>
            <div> <h3>父传来的参数如下:</h3> <div> {{ msg }}</div> </div>
            <button @click="send"> 子向父传参数 </button>
        </div>
    </template>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
        var mydate = {
            message: '我是父Vue',
            ak: "父-ak47"
        };

        var childData = {
            props: ['msg','iso'],
            template: '#childComp',
            data: function() {
                return { 
                    child_message: '这是子组件的内容',
                    child_abc: '子-abc'
                };
            },
            methods: {
                send: function(){
                //这里使用getevent事件触发，同时把this.child_abc参数传递过去
                    this.$emit("getevent", {msg:this.child_abc});
                }
            }
        }
        new Vue({
            el: '#my-vue',
            components: {
                'my-component' : childData
            },
            data: mydate,
            methods: {
                show: function () {
                    alert('run show method.');
                },
                getChildData: function(d) {
                    this.message = d.msg;
                }
            }
        });

    </script>
</html>

子向父传参数的事件笔记
1）自定义的事件名，不要用大小写命名，都使用小写。若使用驼峰命名，则子组件中使用this.$emit触发一个驼峰式命名的事件，将不起作用，即

...
<!-- 这里定义了一个驼峰式的自定义事件名-->
<my-component :getValue="get"></my-component>
...
<script>
   ...
   // 这里是子组件vue对象的方法定义
   methods:{
     send: function(){
        this.$emit("getValue",{d:"子向父发送的数据!"});
     }
	}
   ...
</script>

上面这端代码，事件getValue将不会被触发，因为识别不了存在大写的事件名

三、路由

使用route需要先引入vue-router.js router的git库下载地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>componenet test</title>
    </head>

    <body>
        <div id="my-vue">

            <!-- router-link会被渲染成a标签-->
            <!-- 如果想传递变量，使用:to="url"-->
            <router-link to="/child1">子组件1</router-link>
            <router-link to="/child2">子组件</router-link>
            <!--路由匹配到的组件将渲染在这里-->
            <router-view></router-view>

        </div>

        
    </body>
    <template id="childComp1">
        <div>
            <div> {{ child_message }} </div>
            <div> {{ child_abc }} </div>
        </div>
    </template>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-router.js"></script>
    <script type="text/javascript">
        var child1 = {
            template: '#childComp1',
            data: function() {
                return { 
                    child_message: '这是子组件的1内容',
                    child_abc: '子1-abc'
                };
            },
        }
        var child2 = {
            template: '#childComp1',
            data: function() {
                return { 
                    child_message: '这是子组件的2内容',
                    child_abc: '子2-abc'
                };
            },
        };

        //定义路由
        var routes = [
            //每个路由对应一个组件
            {path:'/child1',component:child1},
            {path:'/child2',component:child2},
        ];
        var router = new VueRouter({
            routes:routes
        });
        new Vue({
            el: '#my-vue',
            router :router
        });
    </script>
</html>

丰色木夕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生 vue.js 快速笔记

一、最简单的demo Hello world先下载vue.js vue官方库<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body&gt...
复制链接

扫一扫