vue指令

偏执的太偏执、 2022-09-16 06:05 193阅读 0赞

## vue介绍 ##

### 1.作者 ###

尤雨溪(vue) \[阿里\] 3.0

### 2.vue概念 ###

官网：[Vue.js][]

渐进式 JavaScript 框架

渐进式：主张最少

在一个库和一套完整框架之间自如伸缩。

优点：

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

缺点：

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

核心：

数据驱动 组件系统

兼容：

Vue **不支持** IE8 及以下版本。

SPA

single page application 单页面应用

http://baidu.com/#index     index.html v-text|v-html
    http://baidu.com/#login     index.html
    http://baidu.com/#register  index.html
    http://baidu.com/#course    index.html  {
       {}}

优点：
    	用户体验好
    	服务器压力小
    缺点：
    	首屏加载时间长
    	不利于SEO优化

MPA

multiple page application 多页面应用

http://ujiuye.com/1  index.html
    http://ujiuye.com/2  2.html
    http://ujiuye.com/3  3.html

优点：
    	有利于SEO优化
    缺点：
    	会有白屏，用户体验度不好
    	服务器压力大

### 3.vue初体验 ###

### 4.下载和安装 ###

1.cdn

2..npm

npm i vue --save

vue.js\[有报错提醒\] vue.min.js\[没有报错提醒\]

3.脚手架

### 5.vue实例 ###

1.引入

2.挂载点

3.实例化

new Vue({
    	el:"#box"
    })

1.el可以是任意的css选择器
    2.一个vue对象，只能挂载到一个节点上，如果你的el有好几个满足条件，也只挂到满足条件的第一个节点上
    3. 报错Do not mount Vue to <html> or <body> - mount to normal elements instead.
                    // mount挂载
                    // el不要挂载到html|body,挂载到正常的元素上
    4.el最好挂载到一个id选择器上

data and methods

// 3.实例化一个Vue对象(属性和方法)
    new Vue({
        el: "#app", //挂载点
        //属性:页面需要的变量
        data: {
            name: "妲己",
            sex: "女",
            age: 20
        },
        //方法：页面需要函数
        methods: {
            changeName() {
                this.name = "王昭君"
            },
            changeAge() {
                this.age = 30;
            }
        }
    })

html

<div id="app">
        
        
        <h3>{
       {name}}</h3>
        <h3>{
       {sex}}</h3>
        <h3>{
       {age}}</h3>
        
        
        <button @click="changeName()">王昭君</button>
        <button @click="changeAge()">age=30</button>
    </div>

模板语法 \{ \{\}\}

数据

// 3.实例化
    new Vue({
        el:"#app",
        data:{
            name:"妲己",
            price:20.00,
            arr:[],
            course:{
                title:"暑假班",
                price:199,
                time:"202109月10日-2021年12月10日"
            }
        },
        methods:{}
    })

语法：

<h3>{
       {1+1}}</h3>
    <h3>{
       {name}}</h3>
    <h3>姓名：{
       {name}}</h3>
    <h3>{
       {'姓名：'+name}}</h3>
    
    
    <h3>价格：{
       {price.toFixed(2)}}</h3>
    
    
    <h3>{
       {arr.length===0?'暂无数据':'有数据'}}</h3>

## 6.vue指令 ##

指令：以v-开头写在属性的位置上

指令目的：绑定数据。

标签;
    
    表单元素：input textarea [value    val()]
    非表单元素：div span li [innerHTML  html()]
    媒体元素：img video audio [src      attr("src","1")]

### 1.非表单元素 ###

\{ \{\}\} v-text v-html 区别

{
       {}}  : 优点：简单  缺点：不能解析标签，首屏会出现闪屏问题
    v-text: 优点：首屏不会出现闪屏问题    缺点：不能解析标签，不方便
    v-html: 优点：解析标签，首屏不会出现闪屏问题 缺点:不方便

由于vue打造的是SPA，首屏加载慢，vue可能未加载完成，所以不建议使用\{ \{\}\},使用v-text;其他的路由，使用\{ \{\}\}。 商品详情页往往使用v-html.

v-text

<div id="app">
        
        
        <div v-text=name></div>
        <div v-text="age"></div>
        <div v-text="sex"></div>
        <div v-text="'姓名：'+name"></div>
        <div v-text="name"></div>
        
        <div v-text="str"></div>
    </div>
    <script>
        new Vue({
            el:"#app",//挂载点 挂载：mount
            data:{//属性
                name:"妲己",
                age:20,
                sex:"女",
                str:"<strong><em>这是一个标签</em></strong>"
            },
            methods:{//方法
    
            }
        })
    </script>

v-html

<div id="app">
        
        
        <div v-html=name></div>
        <div v-html="age"></div>
        <div v-html="sex"></div>
        <div v-html="'姓名：'+name"></div>
        <div v-html="name">哈哈哈</div>
        <hr>
        <div v-html="str"></div>
    </div>
    <script>
        new Vue({
            el:"#app",//挂载点 挂载：mount
            data:{//属性
                name:"妲己",
                age:20,
                sex:"女",
                str:"<strong><em>这是一个标签</em></strong>"
            },
            methods:{//方法
    
            }
        })
    </script>

### 2.表单元素 ###

v-model

<div id="app">
        <h3>表单元素</h3>
        
    
        
        <div>姓名： <input type="text" v-model="nickname"></div>
        <div>生日：<input type="date" v-model="birthday"></div>
        <h3>{
       {nickname}}</h3>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                nickname:"uu",
                birthday:"2021-10-10"
            }
        })
    </script>

### 3.媒体元素 （属性绑定） ###

v-bind，简写为 :

<img v-bind:src="img" alt="">
    <img v-bind:src="ava" alt="">
    
    <a v-bind:href="website.url">
        <img v-bind:src="website.logo" alt="" v-bind:title="website.name">
    </a>
    <a href="http://baidu.com">百度</a>
    
    <a :href="website.url">
        <img :src="website.logo" alt="" :title="website.name">
    </a>
    
    
    <div :aa="website.name">测试属性绑定</div>

### 4.条件渲染 ###

v-if

<h3 v-if="true">天道酬勤</h3>
    <h3 v-if="false">人道酬善</h3>

v-else

<div v-if="comments.length>0">{
       {comments}}</div>
    <div v-else>暂无数据</div>

v-else-if

<div>等级：
        <span v-if="score>=90">优秀</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>
    </div>

v-show

<h3 v-show="true">天道酬勤</h3>
    <h3 v-show="false">人道酬善</h3>

v-if VS v-show

相同点：true 显示，false隐藏。
    不同点：在false情况下，v-if 采用的是惰性加载；v-show采用的是添加display:none。
    使用场景：如果用户频繁切换的话，建议使用v-show;如果切换不频繁的话，建议使用v-if.

### 5.事件绑定 ###

v-on ： 简写@

<div id="app">
        
        <button v-on:click="fn()">点击试试</button>
        <button @click="fn()">点击试试</button>
    
        
        <button @click="add(3,5)">3+5</button>
        <button @click="add(10,30)">10+30</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {},
            methods: {
                fn() {
                    console.log("建设生态文明");
                },
                add(a, b) {
                    console.log(a + b);
                }
            }
        })
    </script>

### 6.一次性渲染 ###

v-once 【了解】

div v-once>姓名：{
       {name}}</div>

### 7.列表渲染 v-for ###

语法：

v-for="(item,index) in arr" item是数组的每一项，index是每一项的下标

案例：

<div id="app">
        <ul>
            
            <li v-for="(item,index) in comments">{
       {item}}</li>
        </ul>
    
        <div class="course">
            
            <div class="every" v-for="item in course">
                <h3>名称：{
       {item.title}}</h3>
                <div>价格：
                    <span v-if="item.price!=0">{
       {item.price.toFixed(2)}}元</span>
                    <span v-else>免费学习</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                //评论
                comments:["物美价廉","很好吃","很好"],
                //课程
                course:[
                    {
                        id:1,
                        title:"暑假班",
                        price:200,
                    },
                    {
                        id:2,
                        title:"数学特长班",
                        price:199,
                    },
                    {
                        id:3,
                        title:"疯狂物理",
                        price:299,
                    },
                    {
                        id:4,
                        title:"疯狂物理2",
                        price:0
                    },
    
                ]
            }
        })
    </script>

### 8.动态类名 ###

1.变量方式

语法：

<div class="blue" :class="bg">香港国安法，你支持吗？</div>

案例：

<button @click="changeBg('red')">red</button>
    <button @click="changeBg('orange')">orange</button>
    <button @click="changeBg('yellow')">yellow</button>
    
    
    <div class="blue" :class="bg">香港国安法，你支持吗？</div>

new Vue({
        el: "#app",
        data: {
            bg: "red",
        },
        methods: {
            changeBg(bg) {
                this.bg = bg;
            }
        }
    })

2.数组\[三元表达式\]

语法：

<div :class="[isRed?'red':'orange']">绿水青山就是金山银山</div>

案例：

<button @click="isRed=true">red</button>
    <button @click="isRed=false">orange</button>
    
    <div :class="[isRed?'red':'orange']">绿水青山就是金山银山</div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isRed:false,
            }
        })
    
    </script>

案例;

1.隔行变色
    2.导航

3.对象方式

语法：

<div :class="{'red':true,'yellow':false,'orange':1==1,'lime':isTrue}">业精于勤荒于嬉</div>

案例：

三行一变色

<div class="course">
        
     
        <div class="every" v-for="(item,index) in course" :class="{'red':index%3==0,'orange':index%3==1,'yellow':index%3==2}">
            <h3>课程名称：{
       {item.title}}</h3>
            <div>价格：
                <span v-if="item.price!=0">{
       {item.price}}元</span>
                <span v-else>免费学习</span>
            </div>
        </div>
    </div>
    <script>
    
        new Vue({
            el: "#app",
            data: {
                isTrue: true,
                //课程
                course: [{
                    id: 1,
                    title: "暑假班",
                    price: 200,
                },
                         {
                             id: 2,
                             title: "数学特长班",
                             price: 199,
                         },
                         {
                             id: 3,
                             title: "疯狂物理",
                             price: 299,
                         },
                         {
                             id: 4,
                             title: "疯狂物理2",
                             price: 0
                         },
                         {
                             id: 1,
                             title: "暑假班",
                             price: 200,
                         },
                         {
                             id: 2,
                             title: "数学特长班",
                             price: 199,
                         }
    
                        ],
    
            },
        })
    </script>

### 9.动态行间样式 ###

语法：

<div :style="{background:'pink'}">今天周五</div>

案例:

<div class="course">
        <div class="every" v-for="(item,index) in course" :style="{background:item.color}">
            <h3 >名称：{
       {item.title}}</h3>
            <div>价格：
                <span v-if="item.price!=0">{
       {item.price.toFixed(2)}}元</span>
                <span v-else>免费学习</span>
            </div>
        </div>
    </div>
    <script>
    
        new Vue({
            el: "#app",
            data: {
                //课程
                course:[
                    {
                        id:1,
                        title:"暑假班",
                        price:200,
                        color:"red"
                    },
                    {
                        id:2,
                        title:"数学特长班",
                        price:199,
                        color:"orange"
                    },
                    {
                        id:3,
                        title:"疯狂物理",
                        price:299,
                        color:"yellow"
                    },
                    {
                        id:4,
                        title:"疯狂物理2",
                        price:0,
                        color:"green"
                    },
                    {
                        id:1,
                        title:"暑假班",
                        price:200,
                        color:"lime"
                    },
                    {
                        id:2,
                        title:"数学特长班",
                        price:199,
                        color:"blue"
                    }
    
                ],
    
            },
        })
    </script>

[Vue.js]: https://cn.vuejs.org/