前端-VUE框架

谁践踏了优雅 2023-10-18 21:23 60阅读 0赞

#### 推荐的开发工具及安装 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]  
[vue开发者工具vue-devtools-4.1.4\_0.crx谷歌插件下载][vue_vue-devtools-4.1.4_0.crx]  
[怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?][.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框架体系 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]

#### 第一个Vue程序 ####

WebStore新建空项目，新建一个HTML，打开[https://www.bootcdn.cn/vue/][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>

打开浏览器，可以看到如下效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]

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

打开浏览器，显示效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 5]

#### 列表渲染 ####

##### 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"
                 :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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 6]

#### vue-cli ####

##### 新建vue项目(方式一) #####

vue create xxxxxx

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

$ cd vue-hello
     $ npm run serve

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

#### 新建Vue项目(方式二) ####

cmd 执行 `vue ui`，使用图形化界面来创建Vue项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 13]  
启动项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 14]  
查看URL地址  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 15]  
然后用IDE打开工程即可

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190710211002931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[vue_vue-devtools-4.1.4_0.crx]: https://blog.csdn.net/u011164906/article/details/80554285
[.crx_Chrome]: http://chromecj.com/utilities/2014-09/181.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190710211804939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[https_www.bootcdn.cn_vue]: https://www.bootcdn.cn/vue/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190710213045152.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190710215213235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190712091258554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190711213106261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190712100121955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190712102612367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20190712102824271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20190712103743486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2019071210390474.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20190712104545766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20190712104652902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20190712104720974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20190712104947710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20190712105024352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0V0aGFuQ28=,size_16,color_FFFFFF,t_70