内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

vue框架入门和ES6介绍

2019-03-06 11:13 出处:清屏网 人气: 评论(0

vue框架入门和ES6介绍

vue 框架入门和 ES6 介绍

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

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

mvvm: mmodel 数据模型,负责数据存储, vview 视图,负责页面显示, vmview 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>

letfor

<!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>
分享给小伙伴们:
本文标签: vueES6

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.