Vue.js Day1

最新推荐文章于 2024-09-02 20:34:02 发布

BladeK丶龙井

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量157

点赞数

分类专栏： Vue学习文章标签： vue css es6 html javascript

本文链接：https://blog.csdn.net/a1476711643/article/details/106907603

版权

Vue学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的使用:官网下包，script src导包。(min为压缩过的，其他则是未压缩的，区别只是大小问题，（听说压缩的把有些报错信息省去了。）)

导包后，需要创建Vue的实例。

<script>
    var vm = new Vue({
        //el  =  element
        //el表示new的Vue示例要控制页面上的哪个区域。例如写了个#app，代表控制的id为app的区域。
        el:'#app',
        data:{   //data属性中，存放的是el要用到的数据
            message:'hello!Vue.js',   //通过Vue提供的指令，可以很方便的把数据渲染(?)到页面中。
            //避免了操作Dom元素的步骤了。
            msg2:'<h2>我是h2</h2>',
            mytitle:'我是mytitle'
        },
        methods:{  //methods属性中定义了当前Vue的示例中所有可用的方法
            show:function(){
                alert('hello')
            }
        }
    })
</script>

总结:el = element，代表Vue实例控制的页面的区域,data代表存储的数据，methods存储方法。

2.v-cloak,v-text,v-html,v-bind,v-on的使用

<body>
    <div id="app">
        <!-- 用v-cloak可以解决插值表达式页面闪烁问题 -->
        <p v-cloak>{{message}}</p>
        <!-- v-text 也可以解决页面闪烁问题，也不用加display:none,但是会把标签里的内容覆盖替换成变量的。 -->
        <h4 v-text="message"></h4>
        <!-- v-html和text一样，但是它可以解析html的标签内容。其他的做不到 -->
        <p v-html="msg2"></p>
        <!-- v-bind 绑定属性的指令，当使用了v-bind，会把里面的内容解析成js的变量来代替 -->
        <!-- 可以拼接 可以写合法的js表达式-->
        <!-- v-bind指令可以被简写为  :要绑定的属性 -->


        <!-- Vue中提供了v-on事件绑定机制，缩写是@ -->
        <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="alert('hello')">
        <input type="button" value="按钮2" :title="mytitle" @click="show">

    </div>
    
</body>

总结:
v-cloak可以通过css【display:none】解决页面刷新会先显示插值的问题，同时这个不会覆盖,故可以进行拼接等一系列的骚操作，但是不会识别html标签。
v-text 会自动解决页面刷新的问题但是会进行覆盖操作，也不会识别html标签。
v-html,顾名思义，来解决识别html标签问题的，也可以做到页面刷新的问题，同样的，也是会进行覆盖操作。

v-bind,绑定属性的指令，可简写成: 【英文输入状态的，一下子忘记叫啥了这个符号……】，当使用这个指令的时候，会把后面的字符串自动对应js那边的变量名，故可以拼接，可以写合法的js表达式。

v-on,Vue提供的事件绑定,可简写成@,使用案例为v-on:click或@click = “方法名”

注意：在Vue中，想调用data里的数据，或者是methods的方法，都需要通过this【也就是Vue实例】来进行调用。
例:vm.msg，vm.start()或this.msg或this.start

或者也可以用es6的箭头函数来解决，去掉function 在()和{ 之间用=>，不能有空格。

写了一个走马灯，具体不展示了。。就是substring的运用，截取第一个，以及第一个往后的字符串，最后拼接这两字符串就彳亍了。。想让它自动也可以设置一个定时器啥的。

事件修饰符 stop,prevent,self,capture,once

在事件后通过.添加，例如@click.stop或v-on:click.stop

stop，顾名思义，停止，用于停止事件的冒泡。

prevent,用于阻止默认行为的发生，典型的例子就是a href的连接跳转，可以给这段文字设置一个点击事件，后接这个prevent，这样子阻止链接跳转，同时也可以触发点击事件里的内容。

self,只有事件在该元素自己本身触发时回调。
假如说有一行这样的代码。

<style>
#div1{
height:70px;
bgc(简略写了。。好长):#000;
}
</style>


<div id="div1">
<input type="button" value="按钮_(:з」∠)_">
</div>

我们知道，一般来说，当我们给div1和按钮都设置点击事件，我们按按钮，也会一起触发它的上级div1的事件，这就是事件的冒泡。
假如说我们点击了按钮，div这个事件不是它自己触发的，是冒泡机制触发的，
我们想实现只有你点了这个div事件才会触发，如果你是通过冒泡或者捕获触发这个
事件，我们不应该让它触发，也就是除了你自己点div，其他什么都不能触发div事件。所以，才会有self。

capture，捕获，一般点按钮，都是先触发按钮事件，再通过冒泡触发上一级的事件,capture就是反着来，想让他先触发div再触发按钮的事件，这就是捕获的作用，想先让它触发？那就加capture吧……

once ，顾名思义。。就是让事件只触发一次，这里不详细介绍。

stop和self的区别

stop是阻止自身向外的冒泡机制，而self是不响应别的元素向外的冒泡。

emm。。如果有大佬不幸看到我这篇文章，文章里又正好有啥错误，欢迎指出……(:з」∠)
睡大觉！

BladeK丶龙井

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js Day1

Vue的使用:官网下包，script src导包。(min为压缩过的，其他则是未压缩的，区别只是大小问题，（听说压缩的把有些报错信息省去了。）)导包后，需要创建Vue的实例。<script> var vm = new Vue({ //el = element //el表示new的Vue示例要控制页面上的哪个区域。例如写了个#app，代表控制的id为app的区域。 el:'#app', data:{ //data属
复制链接

扫一扫

专栏目录