vue基础(vue实例、渲染、样式绑定、模板语法)

一、vue是什么

vue.js官网上其实介绍的很详细

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

二、vue实例

看一个vue实例

完整语法
v-on:click=”doSomething”
缩写
@click=”doSomething”

  • 这是body部分的代码
<body>
    <div id="root">
        <div @click="handleleClick">
            {{message}}
        div>
        <item>item>
    div>
body>
  • script部分的代码
//vue组件 会将它编译成vue实例
    Vue.component('item',{
        template:'
hello world
'
}) //vue实例 var vm = new Vue({ el:'#root', data:{ message:'hello world' }, methods:{ handleleClick:function(){ alert("hello") } }, })

这是一个简单的vue实例。数据和 DOM 已经被建立了关联,所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 message 的值,上例也会相应地更新。

  • item标签内容是一个div

可以绑定元素特性

  • 鼠标点击将会弹出hello

三、条件渲染

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。

  • body部分的代码
    <div id="app">
        
        <div v-if="show">
            用户名:<input key="username" >
        div>
        <div v-else>
            邮箱名:<input key="password" >
        div>

        

    
        
    div>
  • script部分的代码
var vm = new Vue({
        el:"#app",
        data:{
            show:false,
        }
    })

我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。

四、列表渲染

1、改变数组:

  • 改变引用
  • 调用编译方法(push,pop等)
  • 用Vue.set

push 添加
pop 删除
shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回 undefined unshift:将参数添加到原数组开头,并返回数组的长度
splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,…
sort(orderfunction):按指定的参数对数组进行排序
reverse:将数组反序
concat:返回一个新数组,是将参数添加到原数组中构成的

  • body部分代码
<div id="app">
    <div v-for="(item,index) of userInfo">{{item}}div>
div>
  • script部分的代码
var vm = new Vue({
    el:"#app",
    data:{
        userInfo:[1,2,3,4]
    }
})

列表渲染

  • body部分代码



<template v-for="(item,index) of list" :key="item.id">
    <div>
        {{item.text}}==={{index}}
    div>      
    <span>{{item.text}}span>
template>
  • script部分代码
var vm = new Vue({
    el:"#app",
    data:{
        list:[{
            id:"1234454",
            text:"hello"
        },{
            id:"123467",
            text:"dell"
        }]
    }
})

对象渲染

  • script部分代码
userInfo:{
    name:"dell",
    age:21,
    gender:"male",
    salary:"secret"
}

五、样式绑定

  • body部分代码
<div id="app">
    <div @click="handleDivClick" :class="[activated]">
        hello world
    div>
div>
  • script部分的代码
var vm = new Vue({
    el:"#app",
    data:{
        activated:""
    },
    methods:{
        handleDivClick:function(){
            this.isActivated=!this.isActivated;
        }
    }
})

六、模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

  • body部分的代码
<div id="app">
    
    <div>{{name+' Lee'}}div>


    <div v-text="name+' Lee'">div>
    <div v-html="name+' Lee'">div>
div>
  • script部分的代码
var vm=new Vue({
    el:"#app",
    data:{
        name:"<h1>Dellh1>"
    }
})

你可能感兴趣的:(学习总结,vue)