前端-VUE框架

推荐的开发工具及安装ue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?使用淘宝的镜像，避免墙外安装失败npm config set registry http://registry.npm.taobao.org/安装vue-clinpm install -g vue-cli查看版本node -...

氦客

2650人浏览 · 2019-08-08 17:29:05

氦客 · 2019-08-08 17:29:05 发布

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的插值语法{{ 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的计算属性(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>

在这里插入图片描述
我们按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>

在这里插入图片描述

列表渲染

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-cli

新建vue项目(方式一)

vue create xxxxxx

点击 Manually select features 可以手动选择需要的默认配置，比如路由组件、状态控制的Vuex、CSS预编译的组件等(按空格选择)
在这里插入图片描述

安装好后

 $ cd vue-hello
 $ npm run serve

执行以上两句代码，即可运行至如下所示的端口
在这里插入图片描述
打开这个URL，就可以看到vue这个项目了

新建Vue项目(方式二)

cmd 执行 vue ui，使用图形化界面来创建Vue项目
在这里插入图片描述

启动项目

查看URL地址

然后用IDE打开工程即可

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^