Vue知识点总结一

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

郭郭郭憨憨

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

阅读量194

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59494319/article/details/126003816

版权

vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue全家桶：vue vue脚手架（vue-cli） vue路由（vue-router） vuex axios

Vue具有轻量级、单数据流、组件拆分、单页面多应用的特点

vue的使用方法

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>

通过script引用，可以是自己下载的，也可以是cdn即网上的链接，如上

vue的实例创建需要new Vue({})创建

new Vue({
    el:"",
    data:""
})

Vue的数据渲染

普通数据渲染:两个{}花括号渲染，或者使用v-text渲染,v-html可以渲染一些链接

<div id="app">
    {{msg}}
</div>
<div id="app" v-text="msg">
</div>
<div id="app" v-html="href">
</div>
<script>
    new Vue({
        el:"#app",
        data:{
             msg:"你好"，
             href:"<a href='https://www.csdn.net'>CSDN</a>"
        }
    })
</script>

if判断渲染：使用v-if进行简单1的渲染

<div id="app">
<p>if判断是控制dom节点的渲染</p>
<p v-if="isLog">已登录</p>
<p v-else>未登录</p>
</div>
<script>
// 创建一个实例
var vm = new Vue({
    // 要挂载的dom节点
    el:"#app",
    // 存储数据
    data:{
        isLog:true
    }
})
</script>

使用v-if和v-else-if还有v-else进行进阶的渲染

<div id="app">
<h4>if嵌套</h4>
<p v-if="fen >= 90">优秀</p>
<p v-else-if="fen >= 80">不错</p>
<p v-else-if="fen >= 70">良好</p>
<p v-else-if="fen >= 60">及格</p>
<p v-else>不及格</p>
</div>
<script>
// 创建一个实例
var vm = new Vue({
    // 要挂载的dom节点
    el:"#app",
    // 存储数据
    data:{
        fen:55
    }
})
</script>

v-model双向绑定：v-model依赖于有value属性的东西，例如input，select等等

<div id="app">
    <b>model指令 input双向绑定</b><br>
    <input type="text" v-model="str">
    <p>{{str}}</p>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{,
        str:"CSDN"
    }
})
</script>

v-title、v-for和v-bind：

<div id="app">
    <b>bind指令 动态渲染html属性</b>
    <a v-bind:href="url">跳转百度</a>
    <p v-bind:style="'font-size:'+size+';color:#f00'">你好</p>
    <p :title="title">一段话</p>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        size:"28px",
        title:"我是个p标签",
        str:"def"
    }
})
</script>

<div id="app">
    <b>for循环遍历对象</b>
    <p v-for="item in obj">{{item}}</p>
    <b>for循环遍历对象的时候可以加入第二个参数 代表键</b>
    <p v-for="(item,name) in obj">{{name}}--{{item}}</p>
    <b>for循环遍历对象的时候可以加入第三个参数 代表索引</b>
    <p v-for="(item,name,index) in obj">{{index}}、{{name}}--{{item}}</p>
    <b>优化列表渲染 加key值是为了优化diff算法</b>
    <b>虽然key值不会对程序造成影响  但 要求必须加key值</b>
    <p v-for="(item,index) in list" v-bind:key="index">{{item}}</p>
</div>
<script>
// 创建一个实例
var vm = new Vue({
    // 要挂载的dom节点
    el:"#app",
    // 存储数据
    data:{
        list:["学习javascript",123456,"学习小程序2"],
        obj:{
            title:"标题",
            author:"Edwin",
            time:20220726
        }
    }
})
</script>

事件绑定 v-on:或者用@

<div id="app">
    <b>在vue中通过  v-on  指令绑定一个事件</b><br>
    <button v-on:click="num++">{{num}}</button>
    <button @click="num++">{{num}}</button><br>

    <button @click="calc(-1)">-</button>
    <input type="text" size="2" v-model="num">
    <button @click="calc(1)">+</button>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        num:5
    },
    // methods 用于定义方法事件
    methods:{
        calc(n){
            // 通过this.num 获取data数据中的num值
            this.num = this.num + n
        }
    }
})
</script>

vue动态绑定类名和style

<style>
    .active{
        border-bottom: 2px solid #f0f;
    }
    .danger{
        background-color: #f00;
    }

</style>
</head>
<body>
<div id="app">
    <b>动态绑定class类名</b><br>
    <i>对象的方式 当值为true时 键当做类名绑定 当值为false时 不绑定当前类名</i>
    <div v-bind:class="{'active':isActive,'danger':hasError}">这是个div</div>

    <i>数组的方式  数组的每一项都会当做类名渲染</i>
    <p :class="['aa','bb']">这三个类名一样</p>
    <p class="aa bb">这三个类名一样</p>
    <p :class="'aa bb'">这三个类名一样</p>
    <p :class="[active,errorclass]">这是个p标签</p>

    <b>动态绑定style</b>
    <i>对象的方式 键当做样式的属性 值当做样式的值</i>
    <p :style="{color:color,fontSize:fontSize}">有一段话</p>
    
    <i>数组的方式 每个数组项都可以是一个样式的对象 然后把数组中的每个对象合并成一个style</i>
    <p :style="[baseStyle,styles]">还有一段话</p>
</div>

<script>
var vm = new Vue({
    el:"#app",
    data:{
        isActive:true,
        hasError:false,
        active:"activea",
        errorclass:"danger",
        color:"red",
        fontSize:"20px",
        baseStyle:{
        margin:'0',
        padding:'0'
        },
        styles:{
        color:"#ff0",
        fontSize:"22px"
        }
    }
})
</script>