vue框架入门和ES6介绍

达达前端

发布于 2019-07-03 15:09:45

8390

发布于 2019-07-03 15:09:45

文章被收录于专栏：达达前端达达前端达达前端

vue框架入门和ES6介绍

vue框架入门和ES6介绍

vue-mvvm模式，vue是一种轻量级的前端框架，主要为模板渲染，数据同步，组件化，模块化，路由等。

https://cn.vuejs.org/    源码：https://github.com/vuejs/vue

mvvm: m为model数据模型，负责数据存储，v为view视图，负责页面显示，vm为view model负责业务处理。

数据双向绑定： view <-> viewmodel <-> model

vue1下载：

http://v1-cn.vuejs.org/js/vue.js

vue2下载：

https://unpkg.com/vue@2.2.1/dist/vue.js

效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="name"/>
            {{name}}
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            // 设置数据
            data: {
                name: '小达'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <!--绑定元素中的属性-->
            <a v-bind:href="name">百度一下</a>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            // 设置数据
            data: {
                name: 'http://baidu.com'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <div v-html="name"></div>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                name: '<h1>小达</h1>'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <h1 v-text="name"></h1>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                name: '小达'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            {{name}}
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                name: '小达'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-on:click="myclick">a</li>
                <li @click="myclick"></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                
            },
            methods:{
                myclick: function(){
                    console.log("我被点击了")
                }
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="list in lists">{{list.id}}{{list.name}}</li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                lists: [
                 {id:1,name:'a'},
                 {id:2,name:'b'},
                 {id:3,name:'c'},
                 {id:4,name:'d'}
                ]
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <div id="app">
            <h1 v-if="isShow">小达</h1>
            
            <h1 v-Show="isShow">小达</h1>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <template id="account">
            <div>
                <h1>内容</h1>
                <a href="">账号</a>
                <a href="">密码</a>
            </div>
        </template>
        <div id="app">
            <!--组件的使用-->
            <account1></account1>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('account1',{
            template: '#account'
        })
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <template id="account">
            <div>
                <h1>内容{{msg}}</h1>
                <a href="#" @click="log">账号</a>
                <a href="#">密码</a>
            </div>
        </template>
        <div id="app">
            <!--组件的使用-->
            <account1></account1>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('account1',{
            template: '#account',
            data: function(){
                return{
                    msg: 'dashucoding'
                }
            },
            methods: {
                log : function(){
                    console.log('dashucoding')
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <template id="account">
            <div>
                <h1>达叔: {{name1}}</h1>
            </div>
        </template>
        <div id="app">
            <account1 :name1='name'></account1>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('account1',{
            template: '#account',
            // 接收数据
            props:{
                name1 : String
            }
        })
        new Vue({
            el: '#app',
            data: {
                name: '小达'
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js" ></script>
    </head>
    <body>
        <template id="account">
            <div>
                <h1 @click="sendData">子组件</h1>
            </div>
        </template>
        <div id="app">
            <account1 v-on:send="getData"></account1>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('account1',{
            template: '#account',
            methods:{
                sendData(){
                    this.$emit('send',123)
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                name: '小达'
            },
            methods:{
                getData(input){
                    console.log(input)
                }
            }
        })
    </script>
</html>

vue-router路由: vue2.0 下载地址：

https://unpkg.com/vue@2.2.1/dist/vue.js

https://unpkg.com/vue-router@3.0.2/dist/vue-router.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue2.js" ></script>
        <script type="text/javascript" src="js/vue-router2.js" ></script>
    </head>
    <body>
        <div id="app">
            <router-link to='/login'>登录</router-link>
            <router-link to='/register'>注册</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript">
        //定义根组件
        var App = Vue.extend()
        //注册
        var register = Vue.extend({
            template: '<h2>注册！</h2>'
        })
        var login = Vue.extend({
            template: '<h2>登录！</h2>'
        })
        //定义路由
        var vueRputer = new VueRouter({
            routes: [
            {path:'/',redirect:'/login'},
            {path: '/login',component:login},
            {path: '/register',component:register}
            ]
        })
        //使用路由
        new Vue({
            el: '#app',
            router: vueRputer
        })
    </script>
</html>

路由传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue2.js" ></script>
        <script type="text/javascript" src="js/vue-router2.js" ></script>
    </head>
    <body>
        <div id="app">
            <router-link to='/login'>登录</router-link>
            <router-link to='/register/xiaoda'>注册</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script type="text/javascript">
        //定义根组件
        var App = Vue.extend()
        //注册
        var register = Vue.extend({
            template: '<h2>注册！{{oname}}</h2>',
            data: function(){
                return{
                    oname: ''
                }
            },
            created:function(){
                this.oname = this.$route.params.uname
            }
        })
        var login = Vue.extend({
            template: '<h2>登录！</h2>'
        })
        //定义路由
        var vueRputer = new VueRouter({
            routes: [
            {path:'/',redirect:'/login'},
            {path: '/login',component:login},
            {path: '/register/:uname',component:register}
            ]
        })
        //使用路由
        new Vue({
            el: '#app',
            router: vueRputer
        })
    </script>
</html>

ECMAScript6简介模块化，块级作用域，箭头函数等。

什么是JavaScript，它是一种动态类型，弱类型的脚本语言，用来给HTML网页增加的动态功能。

JavaScript由三部分组成：

ECMAScript（核心）
DOM（文档对象模型）
BOM （浏览器对象模型）

let是声明变量的关键字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            /*var a=5;
            console.log(a);
            var a=6;
            console.log(a);*/
            let a=5
            console.log(a)
            // let a = 6
            // console.log(a)
            
        </script>
    </body>
</html>

let与for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            li{
                background: red;
                color: white;
                fonmt-size: 20px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>red</li>
            <li>green</li>
            <li>blue</li>
            <li>yellow</li>
        </ul>
        
        <script>
            //块级作用域
            /*function da(){
                let a=2;
                console.log(a)
            }
            da()*/ 
            // console.log(a) 作用域在括号内
            
            // var for
            /*var lis = document.querySelectorAll('li');
            for(var i=0; i<lis.length; i++){
                lis[i].onclick = function(){
                    alert(i)
                }
            }*/
            
            var lis = document.querySelectorAll('li');
            for(let i=0; i<lis.length; i++){
                lis[i].onclick = function(){
                    alert(i)
                }
            }
        </script>
    </body>
</html>

const:声明一个常量，一旦声明后就不能修改。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            const PI = 3.14;
            //PI = 123; Assignment to constant variable.
            const Person = {
                name : '小达',
                age: 12
            }
            console.log(Person.name,Person.age)
            Person.name = "达";
            Person.age = 123;
            console.log(Person.name,Person.age)
        </script>
    </body>
</html>

数组解构赋值：数组的结构赋值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            /*let [ a,b,c ] = [1,2,3]
            console.log(a,b,c);*/
            
            //let [h,,i,j] = [1,2,3]
            //console.log(h,i,j)
            // 数组的解构赋值要对应，不对应就显示undefined
            
            function da(){
                return ['red','green','blue']
            }
            let [r,g,b] = da()
            console.log(r,g,b)
        </script>
    </body>
</html>

对象赋值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            var obj = {
                id: '1',
                name: '小达',
                age: '12',
                study: function(){
                    console.log('学习')
                }
            }
            let{id,name,age,study} = obj
            console.log(id,name,age,language,study)
        </script>
    </body>
</html>

字符串：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <article id="article">
            <h1></h1>
            <p></p>
        </article>
        
        <script type="text/javascript">
            // 严格模式
            'use strice'
            let obj = {
                title: '哈哈',
                content: 'dashucoding'
            }
            
            let articleElement = document.getElementById('article')
            // innerHTML
            articleElement.innerHTML = '<h1>'+obj.title+'</h1><p></p>'
            
            
        </script>
    </body>
</html>

function 用var, let, const表示

箭头函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var da = function(){
                console.log('da')
            }
            
            // 箭头函数
            var dashu = ()=>console.log('da')
            
            var da2 = a => console.log(a)
            da2('一个参数')
            
            var da3 = (a,b) => console.log(a,b)
            da3(1,2)
        </script>
    </body>
</html>

rest：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function sum(){
                var sum = 0;
                for(var i = 0;i<arguments.length;i++){
                    sum+=arguments[i]
                }
                return sum
            }
            console.log(sum(1,2,3,))
            
            var str = 'abcd';
            console.log(str);
            [...str]
            console.log([...str]);
        </script>
    </body>
</html>

symbol:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var s = Symbol();
            console.log(typeof s)
            var s2 = '123'
            console.log(typeof s2)
        </script>
    </body>
</html>

set:

size 数据的长度
add() 添加数据
delete() 删除数据
has() 查找某条数据
clear() 删除所有数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/jscript">
            <!--对象 keyName:keyValue-->
            <!--重复的数据会踢掉-->
            let set = new Set([1,2,3])
            console.log(set);
            <!--set.size,set.add('a'),set.delete(1),set.has('a'),set.clear()-->
        </script>
    </body>
</html>

map数据结构:

size 数据的长度
set() 添加一条数据
delete() 删除数据
get() 获取数据
has() 查找某条数据
clear() 删除所有数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <script type="text/javascript">
            var map = new Map(['name', 'dashu'],['age',12]);
            console.log(map)
            console.log(map.size)
            console.log(map.set(['sex','n']))
            console.log(map.delete('name'))
            console.log(map)
            console.log(map.get('age'))
            console.log(map.has('age'))
            console.log(map.clear())
            console.log(map)
        </script>
    </body>
</html>

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。

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

原始发表：2019.03.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

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

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

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

vue.js

登录后参与评论

0 条评论

热度

vue框架入门和ES6介绍

vue框架入门和ES6介绍

结言

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐