关键词搜索

源码搜索 ×
×

vue基本语法

发布2023-04-29浏览2330次

详情内容

目录

一、模板语法

(1)文本

(2)原始HTML

(3)属性Attribute

(4)使用JavaScript表达式

二、条件渲染

(1)v-if,v-else

(2)v-show

 (3)v-show和v-if的区别

三、列表渲染

(1)v-for

(2)维护状态

四、事件处理

(1)监听事件

(2)事件处理方法

(3)内联处理器中的方法


一、模板语法

(1)文本

动态显现数据
使用{{}}

一般配合js中的data()设置数据

 

  1. <template>
  2. <div class="hello">
  3. <h3>vue学习</h3>
  4. <p>{{ s }}</p>>
  5. </div>
  6. </template>
  7. <script>
  8. export default{
  9. name: 'HelloWorld',
  10. data() {
  11. return{
  12. s:'嘿嘿嘿'
  13. }
  14. }
  15. }
  16. </script>

(2)原始HTML

双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML代码,需要使用v-html指令

  1. <template>
  2. <div class="hello">
  3. <h3>vue学习</h3>
  4. <div>{{ s }}</div>
  5. <p v-html="s"></p>>
  6. </div>
  7. </template>
  8. <script>
  9. export default{
  10. name: 'HelloWorld',
  11. data() {
  12. return{
  13. s:'<a href="http://www.baidu.com">百度</a>'
  14. }
  15. }
  16. }
  17. </script>

 

 

(3)属性Attribute

v-bind:直接加属性名,可以实现动态属性,如:v-bind:id
v-bind:也可以写成:

  1. <template>
  2. <div class="hello">
  3. <h3>vue学习</h3>
  4. <div v-bind:id="io">2</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default{
  9. name: 'HelloWorld',
  10. data() {
  11. return{
  12. io:1010
  13. }
  14. }
  15. }
  16. </script>

 

(4)使用JavaScript表达式

注意可以实现的是单个表达式,如下:

  1. <template>
  2. <div class="hello">
  3. <h3>vue学习</h3>
  4. <p>{{ n+2 }}</p>
  5. <div>{{ ok?'对啦':'错啦' }}</div>
  6. <div>{{ m.split("").reverse().join("") }}</div>
  7. </div>
  8. </template>
  9. <script>
  10. export default{
  11. name: 'HelloWorld',
  12. data() {
  13. return{
  14. n:3,
  15. ok:false,
  16. m:"abcdefg"
  17. }
  18. }
  19. }
  20. </script>

 

二、条件渲染

(1)v-if,v-else

v-if指令值为true时渲染
v-else表示v-if的‘else’块

  1. <template>
  2. <div class="hello">
  3. <h3>vue学习</h3>
  4. <div v-if="f1">
  5. 我叫大力
  6. </div>
  7. <div v-else>
  8. 我不叫大力
  9. </div>
  10. <div v-if="f2">
  11. 我叫大力
  12. </div>
  13. <div v-else>
  14. 我不叫大力
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. export default{
  20. name: 'HelloWorld',
  21. data() {
  22. return{
  23. f1:true,
  24. f2:false
  25. }
  26. }
  27. }
  28. </script>

(2)v-show

v-show也是用于条件性展示渲染

 

  1. <template>
  2. <h3>vue学习</h3>
  3. <div v-show="f1">first</div>
  4. <div v-show="f2">second</div>
  5. </template>
  6. <script>
  7. export default{
  8. name: 'HelloWorld',
  9. data() {
  10. return{
  11. f1:true,
  12. f2:false
  13. }
  14. }
  15. }
  16. </script>

 (3)v-show和v-if的区别

v-if 是“真正”的条件渲染。如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。

v-show 就简单得多,不管初始条件是什么,元素总是会被渲染。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好

三、列表渲染

(1)v-for

使用v-for对列表进行遍历

 

  1. <template>
  2. <h3>vue学习</h3>
  3. <ul>
  4. <li v-for="i in list">
  5. id:{{ i.id }}
  6. name:{{ i.name }}
  7. </li>
  8. </ul>
  9. </template>
  10. <script>
  11. export default{
  12. name: 'HelloWorld',
  13. data() {
  14. return{
  15. list:[
  16. {
  17. id:11,
  18. name:'小红'
  19. },
  20. {
  21. id:13,
  22. name:'小明'
  23. },
  24. {
  25. id:18,
  26. name:'大大'
  27. }
  28. ]
  29. }
  30. }
  31. }
  32. </script>

 

(2)维护状态

一般每个列表中都会有一个唯一ID,而我们正是通过这个唯一id的变化来判断是否渲染。

如:<li v-for="i in items":key="i.id"> 

  1. <template>
  2. <h3>vue学习</h3>
  3. <ul>
  4. <li v-for="i in list" :key="i.id">
  5. id:{{ i.id }}
  6. name:{{ i.name }}
  7. </li>
  8. </ul>
  9. </template>
  10. <script>
  11. export default{
  12. name: 'HelloWorld',
  13. data() {
  14. return{
  15. list:[
  16. {
  17. id:11,
  18. name:'小红'
  19. },
  20. {
  21. id:13,
  22. name:'小明'
  23. },
  24. {
  25. id:18,
  26. name:'大大'
  27. }
  28. ]
  29. }
  30. }
  31. }
  32. </script>

四、事件处理

(1)监听事件

监听事件我们可以使用v-on指令(通常简写成@符号)监听DOM事件,
用法:v-on:click="first"或者@click="second"  (click是点击事件)

  1. <template>
  2. <h3>vue学习</h3>
  3. <button v-on:click="c+=1">点击c ,c变成{{ c }}</button>
  4. </template>
  5. <script>
  6. export default{
  7. name: 'HelloWorld',
  8. data() {
  9. return{
  10. c:1
  11. }
  12. }
  13. }
  14. </script>

(2)事件处理方法

使用函数作为处理方法

  1. <template>
  2. <h3>vue学习</h3>
  3. <button @click="num1">点击</button>
  4. </template>
  5. <script>
  6. export default{
  7. name: 'HelloWorld',
  8. data() {
  9. return{
  10. c:1
  11. }
  12. },
  13. methods: {
  14. num1(){
  15. console.log('来了');
  16. }
  17. }
  18. }
  19. </script>

 

(3)内联处理器中的方法

说简单点就是传递参数,具体看下面的例子就懂了

  1. <template>
  2. <h3>vue学习</h3>
  3. <button @click="say('12345')">我来</button>
  4. <button @click="say('abcdefg')">我不来</button>
  5. </template>
  6. <script>
  7. export default{
  8. name: 'HelloWorld',
  9. data() {
  10. return{
  11. c:1
  12. }
  13. },
  14. methods: {
  15. num1(){
  16. console.log('来了');
  17. },
  18. say(sh){
  19. alert(sh);
  20. }
  21. }
  22. }
  23. </script>

 

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载