前端-VUE框架

推荐的开发工具及安装

前端-VUE框架
vue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载
怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?

使用淘宝的镜像,避免墙外安装失败

npm config set registry http://registry.npm.taobao.org/

安装vue-cli

npm install -g vue-cli

查看版本

node --version
npm --version
vue --version  

Vue框架体系

前端-VUE框架

第一个Vue程序

WebStore新建空项目,新建一个HTML,打开https://www.bootcdn.cn/vue/,使用其中一个版本的vue.min.js,复制<script>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<div class="bg">
    hello world!!
    {{msg}}
</div>
<script>
    new Vue({
        el:'.bg',
        data:{
            msg:'hello vlue!!'
        }
    })
</script>
</body>
</html>  

打开浏览器,可以看到如下效果
前端-VUE框架

Vue的插值语法{{ msg }} 和 指令及指令缩写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            color: red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<!--v-bind:id 绑定某个ID-->
<div class="bg" v-bind:id="bg1">
    hello world!!
    {{msg}}
    <div>
        {{ (count+1)*10 }}
    </div>
    <div v-html="template">
        {{template}}
    </div>
    <a href="http://www.baidu.com">百度</a>
    <!--和上面的效果一样-->
    <a v-bind:href="url">百度2</a>
    <a :href="url">百度3</a>
    <div>
        <button type="button" v-on:click="submit()">加数字</button>
        <button type="button" @click="submit()">加数字方式二</button>
    </div>
</div>
<script>
    new Vue({
        el:'.bg',
        data:{
            msg:'hello vlue!!',
            count:0,
            url:'http://www.baidu.com',
            template:'<div>hello template</div>',
            bg1:'app-bind'
        },
        methods:{
            submit:function () {
                this.count ++
            }
        }
    })
</script>
</body>
</html>

打开浏览器,显示效果如下
前端-VUE框架

Vue的计算属性(computed)与侦听器(watch)

watch一般监听的是一个变量(也是能是个单一的变量,可能是一个数组),computed可以监听很多个变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id='app'>
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var arr = 'new test'
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            another:'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log('newval is:' + newval)
                console.log('oldval is:' + newval)
            }
        },
        computed: {
            msg1:function () {
                return 'computed:'+this.msg + "," + this.another + arr
            }
        }
    })
</script>
</body>
</html>

前端-VUE框架
我们按F12,在开发者调试工具里,去改变msg的值,这时第一行和第二行的msg 都会动态改变
改变msg1的值,这时第二行的msg1会动态改变
改变arr的值,此时不会改变,但这时再去改变msg或msg1的值,此时连带arr都会动态改变

watch:异步场景
computed:数据联动

条件渲染

v-if,v-else,v-else-if 和 v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id='app'>
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var arr = 'new test'
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            another:'another Hello Vue!!'
        },
        watch: {
            msg: function (newval, oldval) {
                console.log('newval is:' + newval)
                console.log('oldval is:' + newval)
            }
        },
        computed: {
            msg1:function () {
                return 'computed:'+this.msg + "," + this.another + arr
            }
        }
    })
</script>
</body>
</html>

前端-VUE框架

列表渲染

v-for,v-for与v-if结合使用,Class与Style绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
<body>
<div id="app">
    <div v-for="item in list">
        {{item}}
    </div>
    <div v-for="item in list2">
        姓名:{{item.name}} 年龄:{{item.age}}
    </div>
    <div v-for="item in list2">
<!--        <div v-if="item.age > 29" v-bind:style="style1">-->
        <div v-if="item.age > 29"
             :class="{'active': true}"
             :style="style1">
            老人:{{item.age}}
        </div>
        <div v-else
            :class="['active','add','more',{'another':true}]">
            年轻人:{{item.age}}
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue!',
            style1: {
                color: `red`,
                textShadow: `0 0 5px green`
            },
            list: [1, 2, 3, 4, 5],
            list2: [{
                name: 'liwei',
                age: 16
            }, {
                name: 'lili',
                age: 30
            }]
        },
    })
</script>
</body>
</html>

前端-VUE框架

vue-cli

新建vue项目(方式一)

vue create xxxxxx

点击 Manually select features 可以手动选择需要的默认配置,比如路由组件、状态控制的Vuex、CSS预编译的组件等(按空格选择)
前端-VUE框架
前端-VUE框架
安装好后

 $ cd vue-hello
 $ npm run serve

执行以上两句代码,即可运行至如下所示的端口
前端-VUE框架
打开这个URL,就可以看到vue这个项目了
前端-VUE框架

新建Vue项目(方式二)

cmd 执行 vue ui,使用图形化界面来创建Vue项目
前端-VUE框架
前端-VUE框架
前端-VUE框架
启动项目
前端-VUE框架
查看URL地址
前端-VUE框架
然后用IDE打开工程即可

上一篇:AWS(amazon ec2)服务器流量查询


下一篇:亚马逊应用服务EC2迁移到Lightsail过程