Vue初探及相关入门指令

最新推荐文章于 2024-09-24 11:41:48 发布

在原地。

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量99

点赞数

分类专栏：关于Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45308139/article/details/120026673

版权

关于Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

介绍

vue是构建用户界面的渐进式 JavaScript 框架

故而我们在理解上要专注于“渐进式”三字——主张最少：核心很小，需要什么，安装什么。

五大块核心

指令、组件、路由、状态管理、UI库和第三方插件。

两大核心组成

数据驱动和组件系统。越了解vue越可以体会到“数据驱动”的真正含义哈哈哈，后面会慢慢普及到。

（这一点万分重要）！！！vue数据驱动可以提高效率，自动监控数据变化，数据变化时让视图自动变化，我们就不用手工做DOM操作,data里的数据是被监控的响应数据,放在object.defineProperty()

优点

1.轻量级的数据框架
2.双向数据绑定
3.提供了指令
4.组件化开发
5.客户端路由
6.状态管理

缺点

1.Vue 底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)；
3.由于 CSR的先天不足，导致首屏加载时间长，有可能会出现闪屏。

理解MVVM模式

M-model模型
V-view视图
VM-viewModel 视图模型
模型（model）通过视图模型决定视图(view)
视图（view）通过视图模型修改模型 (model)
视图模型是模型和视图之间的桥梁。

理解SPA

single page application，单页面应用。

优点：加载快，用户体验好

缺点：不利于SEO,首屏加载时间长

a页面—>index.html/#/a

b页面—>index.html/#/b

理解MPA

Multi-page Application，多页面应用。

优点：有利于SEO

缺点：会有白屏，用户体验不好

a页面—>a.html

b页面—>b.html

Vue实例

1、如何用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入 -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 2.作用范围 -->
    <div id="app">
        <div>{{1+1}}</div>
        <div>{{2+2}}</div>
    </div> 

    <script>
        // 3.实例化vue
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

2、el

new Vue({
            //挂载点  mount-挂载
            //1.一个vue对象只能作用在1个节点上，如果el有多个节点满足条件，也只作用在满足条件的第一个节点上。
            //2.Do not mount Vue to <html> or <body> - mount to normal elements instead.
                // 不要把vue挂到html|body上
            // 3.由于一个vue只能作用在一个节点上，所以一般使用id
            el:"#app"
        })

3、data methods

new Vue({
  //挂载点  mount-挂载
  el:"#app",
  //属性
  data:{
    a:1,
    b:false,
    c:"嘻嘻嘻",
    tel:"15727273030"
  },
  //方法
  methods:{
    fn1(){},
    fn2(){},
    fn3(){}
  }
})

4、{{差值表达式}} js模板引擎，mustache表达式

模板template：含有变量(差值表达式)的HTML

<div id="box"> {{str}} </div>
    <script>
        // console.log(Vue);
        let vm = new Vue({
            el:'#box',
            data:{
                str:'hello world'  //响应式数据
            }
        })
    </script>

相关指令

1、v-on

v-on:click="" 简写“@click” ，v-on:click="事件处理函数的名字"

2、v-cloak，该指令生效需要在style声明如下

<style>
        [v-cloak]{
            display: none;
        }
 </style>

3、v-text，绑定变量到元素上，解决花括号闪烁问题

4、v-html ，不但可以绑定变量，还可以渲染html，解析标签

5、v-once ，绑定一次，数据不再变化

<!-- 一次性数据绑定 -->
<div v-once>{{name}}</div>

6、v-bind:value="" 单向数据绑定，简写为“:”，单向的意思是，数据变化，视图会变化；视图变化，数据不会变化

7、v-model="" 双向数据绑定，数据变化，视图会变化；视图变化，数据就变化

v-model的修饰符：

（1）.number：输入字符串转为有效数字

（2）.lazy：取代 input 监听 change 事件

（3）.trim：输入首尾空格过滤

8、v-if，条件渲染，值为真才会渲染，下面以分数等级为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
            <input type="text" v-model="scores">
            <!-- {{scores>=60?"及格":"不及格"}} -->
            <p v-if="scores>=0 && scores<60">
                不及格
            </p>
            <p v-else-if="scores>=60 && scores<=80 ">
                及格
            </p>
            <p v-else-if="scores>=81 && scores<=90 ">
               良好
            </p>
            <p v-else-if="scores>=91 && scores<=100 ">
                优秀
             </p>
             <p v-else>
               数据错误
             </p>
    </div>
    <script>
        // v-if   v-else-if   v-else  条件渲染  惰性的，值为真的时候才渲染
        //0--60 不及格  60-80 及格  81-90 良好  91-100 优秀
        new Vue({
            el:"#box",
            data:{
                scores:0,  //分数
                result:"" //分数对应的等级
            }
        })
    </script>
</body>
</html>

9、v-show，本质为切换css属性 false时是设置display为none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
            <p v-show="visible">hello world</p>
            <button v-on:click="visible=!visible">切换</button>
            <input type="checkbox" v-model="visible" />
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                visible:true
            },
            // methods:{
            //     toggle(){  //切换显示和隐藏
            //         this.visible=!this.visible
            //     }
            // }
        })
    </script>
</body>
</html>

10、v-for，相当于循环遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(item,index) in arr" v-bind:key="item.id">{{item.name}}</li>
        </ul>
        <button v-on:click="add">add</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                arr:[
                    {
                        id:1,
                        "name":"aaa"
                    },
                    {
                        id:2,
                        "name":"bbb"
                    },
                    {
                        id:3,
                        "name":'ccc'
                    },
                    {
                        id:4,
                        "name":"dddd"
                    }
                ]
            },
            methods:{
                add(){
                    this.arr.unshift({
                        id:Date.now(),  //获取当前的时间戳
                        "name":"cccdsf"
                    })
                }
            }
        })
    </script>
</body>
</html>