欢迎访问 生活随笔!

凯发k8官方网

当前位置: 凯发k8官方网 > 前端技术 > vue >内容正文

vue

vue 第一天学习 -凯发k8官方网

发布时间:2024/10/8 vue 28 豆豆
凯发k8官方网 收集整理的这篇文章主要介绍了 vue 第一天学习 ---2018.06.28 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

vue  第一天学习 ---2018.06.28

 

 

1.引包

 

2.学会控制元素、显示数据,基本框架建立

document

  

 

 

 

 

 

 

3.相关的指令,

v-cloak 解决插值表达式的闪烁问题,

v-text

v-html   解析为html

v-bind    vue 中用于绑定属性的指令, v-bind中 可以写表达式,

v-on    绑定各类事件

 

4.总结

4.1 定义一个基本的vue代码结构

4.2 插值表达式和 v-cloak  v-text   v-html  

v-bind绑定变量  缩写是  :

 v-on绑定事件  缩写是  @  

4.3 setinterval ()函数使用  clearinterval()  函数使用

 

2018.06.29  

1.事件修饰符

----关于冒泡机制,

搓我"  @click="btnclick"/>

就是我在点击  btnclick 函数的时候,附带性的也把外层的divclick函数给出发了,

但是先触发btnclick函数,再触发divclick 函数,这样不是很好,

可以使用.stop 阻止,搓我"  @click.stop="btnclick"/>

 

搓我"  @click="btnclick"/>


 

关于stop  self 是存在区别的:self 只是保护自己不被触发,但是stop 阻止所有。

 

2.v-model   实现双向数据的绑定,

v-bind 只能实现数据的单向绑定,从 m--->>v 中,

现在则是v-model  登场,

v-model 指令可以实现 表单元素和model 中数据的双向绑定,但是只能运用于表单元素中,

 

3. vue 中使用class样式样式,class

var vm = new vue({

el :   "#content",

data : {

flag : true,

classobj : {'red':true,'active':false}

},

methods : {

}

});

 

4. vue  控制style  样式

 

5.v-for  的使用,有五种形式,

{{item}}

  普通数组

{{item}}---{{i}}

展示形式不一样

{{user.id}}---{{user.name}}

 对象数组

{{val}}---{{key}}

  对象--键值对

{{count}}

    普通数字形式

这五个形式

 

6.v-for  使用的注意事项,就是保障数据的唯一性

 

7.v-if   v- show

这个是使用v-if控制的元素

  v-if  是删除dom操作,

这个是使用v-show控制的元素

  v-show 是进行元素的display : none属性。

 v-if  对性能消耗较高,因此频发的切换则不使用这个,

v-show 有较高的出事渲染消耗,

 

第一天学习总结:

1.学习了mvc  mvvm 的区别,mvc  是整个项目,mvvm  是前端架构,vm提供数据d绑定,

2.学习了vue  中基本的代码结构,引包,el,data ,methods ,

3.学习了相关的基本指令,

插值表达式,{{msg}}  {{中间是变量名}}

v-cloak  v-text  v-bind(:)  v-on(@)  v-model  v- for ,v-if   v-show ,事件修饰符,

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

5.el  选择控制的区域,data 是个对象,指定控制区域的用到的数据,methods  也是对象,自定义方法,

6.vm 实例中,要使用data 中的数据,和methods  中的方法,使用this

7. v-for  要会使用 key  属性,

8.v- model  只能应用于表单元素,实现数据的双向绑定

9.vue  中绑定样式的两种方式,,v-bind :class  v-bind:style  ,其中数据可以是数组,也可以是类,

 

 

 

 

 

 

   

总结

以上是凯发k8官方网为你收集整理的vue 第一天学习 ---2018.06.28的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错,欢迎将凯发k8官方网推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图