第一章 【vue】基础（超详细）

Vue基础

Vue在HTML中的引入

使用Vue渲染数据

Vue可直接渲染定义在data里的数据,渲染动态数据使用“{ {}}"包裹

示例代码

    {
  
  {message}}
    
    
{
  
  {arr}}
    
    
{
  
  {arr.name}}
    
{
  
  {arr.age}}
    
    
{
  
  {obj[2]}}

在js中挂载Vue实例

• Vue实列的作用范围：vue会管理el选项命中的元素及其后代元素
• 是否可以使用其他选择器 但是建议使用id选择器
• 是否可以设置其他的dom元素 可以使用其他的双标签 不能使用html和body

示例代码

var id = new Vue({
    //el 设置挂载点
    el: '#app',
    //date 数据对象 el实例需要的数据会定义在date中

    data: {
        message: 'hello vue!',
        arr: {
            id: 1,
            name: '张三',
            age: 18
        },
        obj: ['北京', '上海', '昆明', '安宁']
    }})

Vue模板语法

v-bind

v-bind的作用是为元素绑定属性

• 完整写法是v-bind:属性名
• 简写的话可以直接省略v-bind ":"+属性名

示例代码

v-for

v-for指令 可以根据数据生成列表结构

• 数组经常和v-for结合使用
• 语法是（item，index）in 数据
• item代表每一项的数据
• index代表索引
• 数组长度的更新会同步到页面上 是响应式的

示例代码

    
{
  
  {item}}
    
{
  
  {item.name}}
    
{
  
  {index+1}}:{
  
  {item.age}}

v-html

v-html属性指令的作用是设置元素的innerHTML,相当于富文本解析

    
{
  
  {message}}
    

    

    
    

v-if

v-if根据表达式的真假直接操纵dom元素的显示与隐藏

• 当值为true时 元素存在于dom树中 当值为false时 从dom树中移除
• 频繁切换使用v-show反之使用v-if 前者的切换消耗小

示例代码

    

    切换显示

v-else

v-else必须与v-if搭配使用 表示剩下的情况

示例代码

    
优秀
    
良好
    
一般
    
差

v-model