发表于： 2020-06-08 23:51:11

2 2529

今日完成

学习vue框架



vue

在meta中通过script标签引入vue代码

然后就可以通过new实例化vue对象

     <p>--{{msg}}==</p> 


var vm = new Vue({

          //   配置对象
          el: "#app",
          data: {
            msg: "sss",
            msg2: "<h1>af</h1>",
            mytitle: "自定义title",
          },
          methods: {},
        });

创建虚拟DOM关联    全部都是响应式

基本结构和小程序类似  以及插值语法

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

 <p v-html="msg2"></p>

<input type="button" value="按钮" :title="mytitle +'拼接'" />

v-text 直接替换该标签里的值 里面是否有值

v-html 可显示html标签

v-bind:title 绑定属性  可省略v-bind  语法糖


v-on:click 绑定点击事件  语法糖 @click

方法写在methods中


取消冒泡时间

.stop

阻止默认事件

.prevent

捕获

.capture

点击当前触发

.self

只触发一次

.once

    <button @click.stop="Fn"></button>


原生js取消事件冒泡方法

 e.stopPropagation();    //非IE浏览器
window.event.cancelBubble = true;   //IE浏览器

阻止默认事件方法

e.preventDefault();     //非IE浏览器
window.event.returnValue = false;   //IE浏览器



demo

模仿着用vue制作简易计算器

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1