vue语法学习

最新推荐文章于 2022-09-12 20:32:16 发布
最新推荐文章于 2022-09-12 20:32:16 发布
阅读量224 收藏 1
点赞数
分类专栏： 前端 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happyboy2015/article/details/109268226
版权 
<div id="app">

    <p>{{msg}}</p>

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               msg:"个表，你等着！"

           },

           methods:{}

        });

    </script>

说明：

el：操作的区域

data：存放一些参数对象

methods：定义一些自定义方法

 

1、v-cloak、v-text、v-html、v-bind、v-on语法运用

<div id="app">

        <p v-cloak>++++++++{{msg}}--------</p>

        <h4 v-text="msg">------------------</h4>

        <h3 v-html="msg2">1231</h3>

        <input type="button" value="按钮"  v-bind:title="mytitle+',大到你无法想象！'">

        <input type="button" value="绝招" v-on:click="show">

    </div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               msg:"我在这里等你",

               msg2:"<p style='font-size:14px;color:red'>你是魔鬼吗？</p>",

               mytitle:"这是一个功能很强大的按钮"

           },

           methods:{

               show:function(){

                   alert('我弹弹弹弹弹弹！');

               }

           }

        });

    </script>

v-cloak：元素加载完毕后，再一并展示出来，解决插值表达式闪烁的问题，等{{msg}}，加载完后，该元素再一并展示出来

<p v-cloak>++++++++{{msg}}--------</p>

v-text：元素中的内容进行覆盖，msg指向的内容将覆盖，元素里面的内容

<h4 v-text="msg">------------------</h4>

v-html：元素中的内容会进行覆盖，且将msg2指向的内容将转换为html语法来解析

<h3 v-html="msg2">1231</h3>

v-bind：用于绑定对象，同时，也可以解析js表达式，简写语法为v-bind:title=:title

<input type="button" value="按钮"  v-bind:title="mytitle+',大到你无法想象！'">

v-on：绑定方法，简写语法为v-on:click=@click

<input type="button" value="绝招" v-on:click="show">

 

 

2、vm内部访问参数或者方法需用this

<div id="app">

        <input type="button" value="跑起来" @click="lang">

        <input type="button" value="停下来" @click="stop">

        <h3>{{msg}}</h3>

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               msg:"逮！你别跑，吃俺老孙当头一棒",

               intervalId: null // 在data上定义 定时器Id

           },

           methods:{

               lang(){

                if (this.intervalId != null) return;



                this.intervalId = setInterval(() => {

                var start = this.msg.substring(0, 1)

                // 获取到 后面的所有字符

                var end = this.msg.substring(1)

                // 重新拼接得到新的字符串，并赋值给 this.msg

                this.msg = end + start

                }, 400)

               },

               stop() { // 停止定时器

                clearInterval(this.intervalId)

                // 每当清除了定时器之后，需要重新把 intervalId 置为 null

                this.intervalId = null;

              }

           }

        });

    </script>

在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象

 

3、修饰符运用

.stop 阻止冒泡，冒泡（点击div里面的按钮，由里到外往外冒泡），终止在button按钮

<div class="inner" @click="div1Handler">

      <input type="button" value="戳他" @click.stop="btnHandler">

</div>

 

.prevent 阻止默认行为，中断了跳转

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

 

.capture 实现捕获触发事件的机制，由外到里，实现捕获事件

<div class="inner" @click.capture="div1Handler">

      <input type="button" value="戳他" @click="btnHandler">

</div>

 

.self 实现只有点击当前元素时候，才会触发事件处理函数，由里到外，触发时间函数

<div class="inner" @click="div1Handler">

      <input type="button" value="戳他" @click="btnHandler">

</div>

 

.once 只触发一次事件处理函数，触发一次后，就按照默认行为进行下去

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

 

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为

<div class="outer" @click="div2Handler">

      <div class="inner" @click.self="div1Handler">

        <input type="button" value="戳他" @click="btnHandler">

      </div>

</div>

 

4、v-model实现表单元素和model的数据的双向绑定

<div id="app">

        <input type="text" v-model="msg">

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               msg:"为中华崛起而读书"

           },

           methods:{}

        });

    </script>

v-model：双向绑定了表单元素，表单元素值发生变化，model中的数据也会发生变化

 

5、样式绑定与三元运算符运用

<div id="app">

        <h1 class="red thin">Hello World!</h1>

        <h1 v-bind:class="['red', 'thin']">Hello World!</h1>

        <h1 v-bind:class="['thin', flag?'italic':'red']">Hello World!</h1>

        <h1 v-bind:class="['thin','red',{'active':flag}]">Hello World</h1>

        <h1 v-bind:class="classobj">Hello World!</h1>

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               flag:true,

               classobj:{red:false,thin:true,italic:true,active:true}

           },

           methods:{}

        });

    </script>

使用三元运算符提供代码可读性

<h1 v-bind:class="['thin','red',{'active':flag}]">Hello World</h1>

 

绑定的对象的属性可以为类名

<h1 v-bind:class="classobj">Hello World!</h1>

 

6、for循环使用（循环普通数组\数组对象\对象\数字）

<div id="app">

        <p v-for="(item,i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

        <p v-for="(item,i) in list2">索引值：{{i}}---名字：{{item.name}}---年龄：{{item.age}}</p>

        <p v-for="(value,key,i) in user">索引值：{{i}}---键：{{key}}---值：{{value}}</p>

<p v-for="count in 10">这是第 {{ count }} 次循环</p>

</div>

<script>

        var vm=new Vue({

           el:'#app',

           data:{

               list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],

               list2:[

                   {name:'张三',age:'20'},

                   {name:'李四',age:'18'},

                   {name:'王二',age:'19'}

               ],

               user:{name:'张三',age:'20',like:'读书'}

           },

           methods:{}

        });

</script>

 

循环普通数组对象，第一个参数item,为具体的数值，第二项i,为索引值，第三项list为循环的对象，这三项名称都不是固定写法，可任意命名

<p v-for="(item,i) in list">索引值：{{i}} --- 每一项：{{item}}</p>

 

循环数组对象,一个参数item,为循环的对象，具体的数值，则需要item.名称，得到具体值，第二项i,为索引值，第三项list2为循环的数组对象，这三项名称都不是固定写法，可任意命名

<p v-for="(item,i) in list2">索引值：{{i}}---名字：{{item.name}}---年龄：{{item.age}}</p>

 

循环对象，第一个参value,数为数值，第二项key为具体的键，第三项i,为索引值，第四项user为循环的对象，这四项名称都不是固定写法，可任意命名

<p v-for="(value,key,i) in user">索引值：{{i}}---键：{{key}}---值：{{value}}</p>

 

循环数字

<p v-for="count in 10">这是第 {{ count }} 次循环</p>

 

7、for循环key关键字使用

<div id="app">

        <label>id:

            <input type="text" v-model="id">

        </label>

        <label>name:

            <input type="text" v-model="name">

        </label>



        <input type="button" value="增加" v-on:click="add">



        <p v-for="item in list"  v-bind:key="item.id">

            id：{{item.id}}---名字：{{item.name}}

        </p>

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               id:'',

               name:'',

               list:[

                   {id:1,name:"余键"},

                   {id:2,name:"姚晶"}

               ]

           },

           methods:{

               add(){

                    this.list.unshift({id:this.id, name:this.name})

                    this.id="";

                    this.name="";

               }

           }

        });

    </script>

v-for 循环的时候，key 属性只能使用 number获取string。

key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值。

 

8、v-if、v-show用法

<div id="app">

        <input type="button" value="true" v-on:click="settrue">

        <input type="button" value="false" v-on:click="setfalse">

        <h1 v-if="flag">你知道学习的重要性吗？</h1>

        <h1 v-show="flag">你知道思考的重要性吗？</h1>

</div>

    <script>

        var vm=new Vue({

           el:'#app',

           data:{

               flag:true

           },

           methods:{

                settrue(){

                    this.flag=true;

                },

                setfalse(){

                    this.flag=false;

                }

           }

        });

    </script>

 

v-if 的特点：每次都会重新删除或创建元素，有较高的切换性能消耗

v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗

 

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show

如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

习惯de沉默
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基本语法学习-3
pin-csdn的博客
07-08 915
先插入2个页面配置的小功能使用 1、设置页面的title a.在router—index.js中配置路由，加上meta标签，例如： { path: '/test_components', component: TestMyComponents, meta:{ title:"测试自定义组件，指令页面" } } b.在main.js中配置 /*路由发生变化修改页面title */ router.beforeEach((to, from, next) => {
Vue学习笔记（基础语法）
小言同学的博客
02-12 1059
一、安装Vue.js 直接用<script>引入：从官网下载并用<script>标签引入 使用CDN方法 <！--两者选其一即可--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> npm方法 n
VUE基础语法学习
qq_42756994的博客
09-02 263
基础语法参考教程：https://www.runoob.com/vue2/vue-tutorial.html vue项目的目录结构 v-on 触发某个事件 v-bind 把组件中data中变量值绑定到html元素的属性中 可以在v-on:click中直接写表达式 可以在v-on:click中直接写内连js v-on事件修饰符 v-model 双向绑定，既设置初始化值，也可以获取用户输入的值 v-bind和v-on...
vue基本语法学习-1
pin-csdn的博客
07-07 220
1、v-html v-html ：以html的格式输出 <table> <!-- 表格行 --> <!-- 使用了2种标签v-html 和v-if --> <!-- v-html ：以html的格式输出 --> <!-- v-if ：通过获取data里面的属性决定元素是否显示 --> <tr> <td> <butto
vue的基础语法学习
weixin_45037073的博客
03-12 146
最近接触到了前端，就学了一点，记录下来 vue是JavaScript的框架，简化了dom的操作，响应式数据驱动的（model和vue的双向绑定）。 常用的vue指令有： v-text:设置文本值，会替换掉标签内的值（下面例子中的jony会不见） v-on：绑定事件，v-on:click=“方法名”，绑定了点击事件，可以简写成@click=”方法名“，方法的内部通过this访问data的数据。 v-show：根据数据的真假判断标签内容是否展示内容 v-if：效果和v-show一样，但它操作是dom元素（资
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
vue组件学习教程
01-19
在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。 注册组件 全局组件 语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法 Vue.component('component-...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
学习Vue组件实例
11-29
Vue实例创建的语法是`var vm = new Vue({})`，其中包含一系列可配置的选项。以下是几个主要配置项的详细说明： 1. **el**: 这个选项用于指定Vue实例管理的DOM元素。可以是一个CSS选择器（如`'#root'`）或者直接传入...
vue中软学习配套源码
06-04
"Vue中软学习配套源码"是专门为中软国际的学员或者对Vue.js感兴趣的学习者提供的实践资源，旨在帮助他们更深入地理解Vue的核心概念和实际应用。 在这一套源码中，你可以找到以下关键知识点： 1. **Vue实例**：Vue...
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9206
vue基础语法、尚硅谷、欢迎交流
Vue的语法学习
x-dragon8899的博客
05-07 317
一、Vue的基本语法 if-else for 二、绑定事件 三、双向绑定 文本框 单选框 下拉列表 四、Vue组件讲解 Axios异步通信 五、计算属性 六、插槽 solt 七、自定义事件内容分发 ...
vue语法学习（含示例代码）
Irene1991的博客
01-10 349
vue语法学习（含示例代码）
vue基础语法学习
xiaobing_hope的专栏
01-11 761
vue基础语法v-if与v-show的区别：<template v-if="loginType == 'username'"> <!-- template作为包装元素，不会渲染到dom结构中 --> <label>用户名</label> </template> <template v-if="loginType == 'email'"> <label>邮箱</label> </
Vue基础语法学习
cckuangniao的博客
08-26 105
基础语法学习认识VueVue对象指令 认识Vue Vue就是js的一个库,这个库中提供了一个Vue类,通过这个类的对象可以和html中的标签进行绑定 Vue对象 new Vue({ el:需要绑定的标签的id选择器, data:对象,为被绑定的标签提供各种数据 methods:对象,通过提供方法来通过功能, computed:对象,通过提供方法来提供数据 }) 指令 {{Vue属性}} – 标签内容 v-bind:标签属性名 = “Vue属性” – 标签属性 v-for:“变量 in Vue对象提供
JS Vue 基础语法学习(一)
weixin_45148841的博客
07-19 152
JS Vue.js 基础语法学习(一) 现在开始我将开始正式接触Vue,好吧其实好几天前就开始看了,一直没机会写博客,今天比较闲,现场没什么事情,工作干完了,赶快抽时间来写,废话不多说,开始吧! 老规矩直接上代码:实践出真知!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式</title> <script src="js/j
Vue学习（一）基础语法
潜心修炼
12-18 462
点击这里测试 刚开始写key一直取不出来值，仔细看了看发现： js中new Vue对象时，Vue一定要大写！ HTML代码： {{ message }} 鼠标放上 you can see {{msg.text}} JS代码： var app1= new Vue({ el: '#app-1', d
vue基础语法
weixin_66277385的博客
04-27 776
模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number...
Vue学习笔记（模版语法）
简单随风的博客
08-17 224
1.data基础用法 在data部分声明的字符串，template部分可以以{{}}的形式直接引用 &lt;template&gt; &lt;div&gt; &lt;div&gt;data:{{msg}}&lt;/div&gt; &lt;!--结果: data:helloworld--&gt; &lt;/div&gt; &lt;/template&gt; &lt;s
vue3基础语法学习文档
最新发布
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板...这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值