uni-app学习笔记(1)：模板语法

文章目录

• ​​下载uni-app开发工具HBuilderX​​
• ​​学习 uni-app 教程​​
• ​​笔记​​

• ​​1、显示 hello word 的几种方式​​
• ​​2、绑定样式的写法​​
• ​​3、事件绑定​​
• ​​4、条件渲染​​
• ​​5、列表渲染​​
• ​​6、v-model​​

下载uni-app开发工具HBuilderX

1、HBuilderX下载地址: ​​下载地址​​ 2、下载后解压，双击解压后的 HBuilderX.exe 即可打开

​​HBuilderX学习更多​​

学习 uni-app 教程

1、​​uni-app官方视频教程​​​ 2、​​开发uni-app需要的vue2教程​​ 3、​​uni-app零基础入门到项目实战​​

笔记

1、显示 hello word 的几种方式

<template>
  <view class="content">
    {{text}}
    <view v-text="text" class="content"></view>
    <view v-html="text" class="content"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text:"<p>hello wold</p>"
      }
    },
  }
</script>

<style>
  
</style>      

2、绑定样式的写法

<template>
  <view :class="myclass" v-bind:style="mystyle">
    Hello world
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mystyle:"font-size:35px;color: #FFFFFF;",
        myclass:"content"
      }
    },
  }
</script>

<style>
  .content{background:red;}
</style>      

3、事件绑定

<template>
  <view :class="myclass" v-bind:style="mystyle" v-on:click="myclick">
    Hello world
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mystyle:"font-size:35px;color:#fff",
        myclass:"content"
      }
    },
    methods:{
      myclick:function(){
        this.mystyle = "font-size:35px;color:#000",
        this.myclass = ""
      }
    }
  }
</script>

<style>
  .content{background:red;}
</style>      

4、条件渲染

<template>
  <view>
    <view :class="myclass" v-bind:style="mystyle" v-if="show">
      Hello world
    </view>
    <view v-else>你好，世界</view>
    <button @click="click">按钮</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mystyle: "font-size:35px;color:#fff",
        myclass: "content",
        show: true
      }
    },
    methods: {
      click() {
        this.show = !this.show;
      }
    }
  }
</script>

<style>
  .content {
    background: red;
  }
</style>      

​

​v-if​

​​的 false 隐藏，默认是把所在的 view 给删除

​​

​v-show​

​​ 则是直接更改样式，​

​display:block;​

​​-> ​

​display:none;​

​​ 所以对于频繁进行切换状态，选择​

​v-show​

​性能更好

需要注意的是 ​

​v-if​

​​和​

​v-else​

​元素必须是相邻的才能正常编译

5、列表渲染

<template>
  <view>
    <view class="" v-for="item in list">
      Hello world
      {{item}}
    </view>
  
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[1,2,3,4,5]
      }
    },
    methods: {
    
    }
  }
</script>

<style>
</style>      

可以显示索引

<template>
  <view>
    <view class="" v-for="(item,index) in list" :key="index">
      {{item}}:{{index}}
    </view>
  
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[
          'Hello',
          'World',
          '你好',
          '世界'
        ]
      }
    },
    methods: {
    
    }
  }
</script>

<style>
</style>      

6、v-model

<template>
  <view>
    <input type="text" value="" v-model="text" />
    <button type="primary" @click="click">提交</button>
    <view v-for="(item,index) in list">
      {{item}}
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: "",
        list: ["hello", "world"]
      }
    },
    methods: {
      click() {
        this.list.push(this.text)
        this.text = ""
      }
    }
  }
</script>

<style>
</style>