vue框架入门和ES6介绍

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由三部分组成:

  1. ECMAScript(核心)
  2. DOM(文档对象模型)
  3. 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>

结言

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

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

作者简介

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端666

Vue实战系列—从目录结构谈可扩展架构设计(1)

好的项目代码结构会大大提升项目的维护性和可扩展性。同时我们可以提供友好的说明,以便其他成员理解项目和快速定位。

16630
来自专栏code秘密花园

[现场实录] VueConf 2019 尤雨溪演讲总结

Chrome DevTools 有约 90 万的周活用户,React 相比有 160 万。Evan 推荐用 Chrome DevTools 来预测 Vue 的项...

20310
来自专栏Nian糕的私人厨房

Vue3.0 组件的核心概念_插槽

Vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slot 和 slot-scope,并且之后的 Vue 3.0 也会使用新语法,这...

15120
来自专栏CRPER折腾记

Vue 2.x折腾记 - (22) Vue 打包图片在safari不显示的问题

图片不显示这个问题在safari上会出现,不管是PC还是手机端,而其他浏览器是可以正常预览

18920
来自专栏大前端666

Vue实战系列—项目搭建四步曲(0)

开篇:想通过输出Vue系列文章,让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

12420
来自专栏EAWorld

老焦专栏 | 为什么我们要成为全栈工程师?

最近我身边的几个技术专家都在学习前端技术(VUE)的开发,为什么他们要学习前端技术呢?因为随着软件技术的发展,全栈工程师已然成为未来发展趋势,对大部分技术人而言...

8940
来自专栏全栈修炼

7 个有用的 Vue 开发技巧

随着组件的细化,就会遇到多组件状态共享的情况, Vuex 当然可以解决这类问题,不过就像 Vuex 官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要...

11530
来自专栏小网管运维之路

vscode

2019年6月11日 ⋅ 浏览量: 3    ...

19420
来自专栏Golang开发

Vue开发环境搭建

nodejs中集成了npm 因此需要安装nodejs,官方地址是https://nodejs.org/en/ 查看当前npm版本

30640
来自专栏前端说吧

vue工具 - vue/cli@3.xx 安装使用流程

27530

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励