Vue 第一天学习 ---2018.06.28

1.引包

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

<title>Document</title>

</head>

<body>

</div>

//创建vue 实例，

var vm = new Vue({

el : '#app',

data : {

methods : {

}

});

</script>

</body>

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.事件修饰符

----关于冒泡机制，

</div>

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

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

可以使用.stop 阻止，<input type="button" value="搓我" @click.stop="btnclick"/>

<br>

</div>

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

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

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

现在则是v-model 登场，

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

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

<h1 class="red thin">这个只是一个测试实例1</h1>

<h1 :class="['red','thin']">这个只是一个测试实例2</h1>

<h1 :class="['red','thin',flag?'active':'']">这个只是一个测试实例3</h1>

<h1 :class="['red','thin',{active:flag}]">这个只是一个测试实例4</h1>

<h1 :class="classObj">这个只是一个测试实例5</h1>

var vm = new Vue({

el : "#content",

data : {

flag : true,

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

methods : {

}

});

4. vue 控制style 样式

<h1 :style="{'color':'red','font-weight': 200}">这个是一个h1,测试1</h1>

<h1 :style="styleObj">这个是一个h1,测试2</h1>

<h1 :style="[styleObj,styleObj2]">这个是一个h1,测试3</h1>

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

<p v-for="item in list">{{item}}</p> 普通数组

<p v-for="(item,i) in list">{{item}}---{{i}}</p> 展示形式不一样

<p v-for="user in list2">{{user.id}}---{{user.name}}</p> 对象数组

<p v-for="(val,key) in list3">{{val}}---{{key}}</p> 对象--键值对

<p v-for="count in 20">{{count}}</p> 普通数字形式

这五个形式

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

7.v-if v- show

<h3 v-if="flag">这个是使用v-if控制的元素</h3> v-if 是删除dom操作，

<h3 v-show="flag">这个是使用v-show控制的元素</h3> 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 ,其中数据可以是数组，也可以是类，

Vue 第一天学习 ---2018.06.28相关推荐

2018.06.28 与或（线段树）
#与或描述样例输入 5 8 1 3 2 5 4 3 1 3 2 1 1 5 3 1 3 1 1 4 6 2 3 4 1 3 2 3 2 2 3 4 3 1 5 **样例输出 ** 3 5 3 7 ...
67.Python修炼之路【72-前端-HTML列表】2018.06.28
html列表有序列表在网页上定义一个有编号的内容列表可以用<ol>.<li>配合使用来实现,代码如下: <ol><li>列表文字一</li&g ...
VUE源码学习第一篇--前言
一.目的前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
vue指令02---自动获取焦点（全局自定义指令Vue.directive()）和全局过滤器Vue.filter() 的学习...
1.1 自动获取焦点在自动获取焦点的学习中涉及到了一个钩子函数 mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted 钩 ...
杰普实习日志第一天学习内容
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
杰普实训日志第一天学习内容
杰普实习日志第一天学习内容主讲人:李春雨主讲人原创内容,https://gitee.com/plusyu/shixun_hdjd/commit/7fd126f6bacfec6b27357a22b ...
【组队学习】【28期】Datawhale组队学习内容介绍
第28期 Datawhale 组队学习活动马上就要开始啦! 本次组队学习的内容为: 吃瓜教程--西瓜书+南瓜书李宏毅机器学习动手学数据分析集成学习 SQL编程语言 R语言数据科学基于Pytho ...
JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...

Vue 第一天学习 ---2018.06.28

Vue 第一天学习 ---2018.06.28相关推荐

最新文章

热门文章