Vue基础功能

最新推荐文章于 2024-01-06 18:41:49 发布

Mr代先森

最新推荐文章于 2024-01-06 18:41:49 发布

阅读量226

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/DAIJZ12138/article/details/105512134

版权

本文将带你深入了解Vue.js的基础功能，包括组件化开发、指令系统、响应式原理以及虚拟DOM的运用，助你快速上手Vue开发。

摘要由CSDN通过智能技术生成

<div id="myApp">
    <input v-model="name">//为页面输入框进行双向数据绑定。
    <button v-on:click="btnClick('JiaZ')">JiaZ</button>//事件绑定
    <p>{
  {name}}</p>
    <p>{
  {name | touper}}</p>//将参数name传给过滤器filters中的toupper方法。
    
    <ol>
        //组件：遍历data中的games，将得到的item绑定给参数game。
        <game-item v-for="item in games" v-bind:game="item">
    </ol>
    
    <p>税后：{
  {price}}，税前：{
  {computPrice}}</p>//计算属性
    <button @click="addClick(5000)">price加价5000元</button>
    <p>税后：{
  {price}}，税前：{
  {watchPrice}}</p>//观察属性
    
    //當isActive為true時，為div綁定一個class属性active.
    <div v-bind:class="{active:isActive}">紅色文本1</div>
    //為div綁定一個class对象，该class对象包含多个样式属性。