初学Vue（二） -- 模板、属性、class及style

abson 发布于2019-08-23 18:07 / 3104人阅读

摘要：完整代码链接模板当所谓的数据发生改变的时候，输出的内容会默认的重新渲染一遍，如果为了安全起见想数据只渲染一遍不再改动的话前面加个就好了模板当改成这样的时候点击按钮将不会再次渲染部分点我部分模板中输出为代码应该怎么显示在中两个花括号相当于原生

完整代码链接

模板 {{}}

当所谓的数据（data）发生改变的时候，输出的内容会默认的重新渲染一遍，如果为了安全起见想数据只渲染一遍不再改动的话前面加个*就好了

模板1

当改成这样的时候点击按钮将不会再次渲染

html部分：    

    {{*msg}}

js部分：

模板2

Vue中输出data为html代码应该怎么显示

在Vue中两个花括号{{}}相当于原生js的innerText，三个花括号{{{}}}相当于原生js的innerHTML。

html部分：
    


 //尝试将这里改为两个看下是否正常显示html标签
{{{msg}}} 


js部分：

注意：建议还是用两个花括号{{}}innerText，防止其他人恶意注入

属性 -- 常用属性class及style

属性 -- src

html部分：
    
    
        //这里的属性如果用原生js的话需要使用vue模板才能接收到vue对象中的data
        //src="{{url}}"
    
        
js部分：
    new Vue({
        el:"body",
        data:{
            //num 是计数器开关，用于控制图片切换
            num:0,
            url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg",
        },
        methods:{
            btn:function(){
                this.num++;
                this.num%2==1?this.url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560472659224&di=896584de51fc9b26933157aed6a00ff7&imgtype=0&src=http%3A%2F%2Fimg08.oneniceapp.com%2Fupload%2Favatar%2F2018%2F05%2F05%2Faba7e29327a27abfcb1e525f623934ee.jpg":
                this.url="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2721952535,2737979507&fm=26&gp=0.jpg";
            }
        }
    })

如果使用原生js的话需要使用vue模板{{}}如果使用vue方法的话则不需要

v-bind:scr="url"可以缩写前缀vue方法为冒号:src="url"，这样的写法vue也可以识别

属性 -- class

使用vue传输innerText的原理，传输文本作为类名

html部分：
   
    
    
    

js部分：

一般赋予多个类的话在html中是class="a b c"，而在vue中则是以数组或json格式，因为json是键值对格式的，相当于数组的下标与索引值的关系。

什么是键值对格式 -- key:value(例子：width:200px;)

数组格式

html部分：
   

    
    

js部分：

json格式

html部分：
   

    
    

js部分：

Style三种传输格式

style在vue中有三种传输格式

json

json数组 - [ json ,json ,json ]

string

其中json与string格式差不多

json格式

因为style原生的代码本来就是类似于json格式的，所以能用json格式传输不出奇

html部分：



js部分：

json数组形式

就像赋予多个类，每个类不同样式一样，你可以定义多个类赋予给同一个标签，同样的也相当于赋予一个标签多个不同作用域下的样式，用json数组形式赋予检查网页代码可以看到样式都给添加进去了

html部分：

//这里给style赋予了两个样式    


js部分：

string形式

string形式其实和json格式的写法一样，但是特意拿出来说是因为他们的概念不一样，string形式是利用vue的类似于innerText的操作来赋予样式的，而json形式的概念突出他的数据格式

html部分：



js部分：

小案例演示：vue-tab面板




    
    tab面板
    
    


    



    {{i}}

云服务器 GPU云服务器 JS中style属性 vue实例属性 vue.js 属性 vue的计算属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104701.html

vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

Pines_Cheng 2019-08-21 17:08 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

ideaa 2019-08-01 17:48 评论0 收藏0
从零开始学习vue

摘要：二起步在学习之前，需要有扎实的基础。三核心实例每个应用都是通过构造函数创建的一个新的实例开始的选项对象在这其中的简称通常都表示实例的变量名。重要说明:本文会在我有空闲时间时持续更新，相当于是将官网的示例给完全呈现，是为了帮助初学者，也是为了巩固我自己的技术，我决定将官网给过滤一道消化，敬请期待。一.介绍 vue是一种渐进式框架，被设计为自底向上逐层应用。所谓渐进式框架，我的理解就是...

pinecone 2019-08-02 12:04 评论0 收藏0
从零开始学习vue

摘要：二起步在学习之前，需要有扎实的基础。三核心实例每个应用都是通过构造函数创建的一个新的实例开始的选项对象在这其中的简称通常都表示实例的变量名。重要说明:本文会在我有空闲时间时持续更新，相当于是将官网的示例给完全呈现，是为了帮助初学者，也是为了巩固我自己的技术，我决定将官网给过滤一道消化，敬请期待。一.介绍 vue是一种渐进式框架，被设计为自底向上逐层应用。所谓渐进式框架，我的理解就是...

flyer_dev 2019-08-29 17:21 评论0 收藏0