第一天

1、选项数据
data、computed、method如何使用
data:一个函数,定义了很多变量(数据),这些变量服务于整个组件,如定义msg:'helloworld’和a:1;
computed :一个对象,包含各种函数(用来操作变量)
methods:一个对象,包含各种函数(与事件相关)

<template>
  <div>
    <div>选项数据</div>
    <div>data:{{msg}}</div>
    <div>computed:{{aDouble}}</div>
    <div @click="say('hi')">点击我</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'helloworld',
        a:1
      }
    },
    computed:{
      aDouble(){
        return this.a*2;
      }
    },
    methods:{
      say(h){
        alert(h);
      }
    },
  }
</script>

在这里插入图片描述
2.模板语法
一个vue文件包括如下内容

  • data
  • 模板可以直接嵌入js代码
  • 指令 v-html、v-on、v-bind
  • 计算属性
  • 过滤器
<template>
  <div>
    <div>模板语法</div>
    <div>data:{{msg}}</div>
    <div>{{number+1}}</div>
    <div v-html="rawHtml"></div>
    <div v-bind:class="color">zzzz</div>
    <div v-on:click="say('hi')">点击我</div>
    <div @click="change">修改颜色</div>
    <div>{{message|capitalize}}</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'helloworld',
        number:1,
        rawHtml:'<span>123</span>',
        color:'red active',
        message:'message'
      }
    },
    methonds:{
      change(){
        this.color='yellow';
      },
      say(h){
        alert(h);
      }
    }
  }
</script>

3.条件渲染
v-if指令,用法:
vi-if 、v-else
vi-if、 v-else-if 、v-else

<template>
  <div>
    <div>条件渲染</div>
    <div>--------------</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else>Not A/B/C</div>
    <div v-show="isShow">123</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        type:'A',
        isShow:true
      }
    }
  }
</script>

在这里插入图片描述
4.列表渲染
v-for指令,用法

  • 用法1:v-for=“item in items”数组
  • 用法2:v-for="(item,index) in items "数组
  • 用法3:v-for="(value,key) in object"对象

Notes:items 是源数据数组并且 item 是数组元素迭代的别名

<template>
  <div>
    <div>列表渲染</div>
    <ul id="example-1">
      <li v-for="item in items">{{item.message}}</li>
    </ul> 
    <ul id="example-2">
      <li v-for="(item,index) in arr">
        {{index}}---{{item}}
      </li>
    </ul>
    <ul id="example-3">
      <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
    </ul>
  </div>
</template>

<script>
  export default{
    data (){
      return{
        items:[
          {message:'Foo'},
          {message:'Bar'},
          {message:'duck'}
        ],
        arr:['foo','bar','duck'],
        obj:{
          firstName:'X',
          lastName:'page',
          age:30,
          ae:18,
        }
      }
    }
  }
</script>

在这里插入图片描述
5.事件处理器

  • v-on指令
  • 缩写@
  • 原始写法 v-on:click 缩写@click
<template>
  <div>
    <div>事件处理器</div>
    <div id="example-1">
      <button v-on:click="counter=counter+1;counter=counter-2">减少1</button>
      <p>这个按钮被点击了{{counter}}次</p>
    </div>
    <div id="example-2">
      <button @click="greet">增加1</button>
    </div>
    <div>--------------</div>
    <div id="example-3">
      <button @click="say('hi')">say</button>
    </div>
    <div id="example-4" @click="doThis2">
      <button @click="doThis">dothis</button>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        counter:0
      }
    },
    methods:{
      greet(){
        this.counter=this.counter+1
      },
      say(h){
        alert(h)
      },
      doThis(){
        alert('doThis')
      },
      doThis2(){
        alert('doThis2')
      }
    }
  }
</script>
<style>
</style>

在这里插入图片描述
6.表单控件绑定

  • v-model指令在表单控件元素上创建双向数据绑定
  • 复选框
  • 多个勾选框
  • 选择列表
<template>
  <div>
    <div>表单控件绑定</div>
    <div>------------</div>
    <input v-model="message">
    <p>Message is :{{message}}</p>
    <div>-----------------------</div>
    <input type="checkbox" value="Jack" v-model="checkdNames"  />
    <label for="jack">jack</label>
    <input type="checkbox" value="Andy" v-model="checkdNames"  />
    <label for="jack">Andy</label>
    <input type="checkbox" value="Boys" v-model="checkdNames"  />
    <label for="jack">Boys</label>
    <br>
    <span>Checked names:{{checkdNames}}</span>
    <div>-----------------------</div>
    <div>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected:{{selected}}</span>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        message:'helloworld',
        checkdNames:[],
        selected:''
      }
    },
    mounted() {
      alert(this.$route.params.userId)
    }
  }
</script>

<style>
</style>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值