vue教程【一】— vue入门

Vue教程 admin 暂无评论


1.Vue.js是什么

1.Vue.js是什么

1.MVC模式

  • Model 模型

  • View  视图

  • Controller 控制器

2.MVVM模式的框架（Vue的模式）

  • Model 模型

  • View 视图

  • viewModel 视图模型

2.Vue.js的优势

  • 不需要操作DOM，只需要关注于视图层

  • 轻量级的框架，压缩后只有20k

  • 中文文档非常清楚，入门非常快

  • 渐进式框架，根据需求选择所要用的部分

3.Vue.js的方法

1.功能

双向数据绑定 ->只有表单元素才能实现。意思是通过指令，表单元素不仅能够将数据显示到DOM中，也可以在DOM中添加数据进入JS里

2.指令

指令 v-开头的行内属性

  • v-model：看到表单元素就加v-model，实现双向数据绑定，将输入的内容更新到对象上去

    1. 当表单元素绑定v-model时，默认根据其进行分组，name属性不再起作用

    2. checkbox复选框，通过v-model绑定一个boolean类型的数据，可以实现选中判断是否的效果。

    3. 如果多选框，需要增加value属性，并复制标记，用v-model绑定数据，数据会获取value的内容，并形成数组。

    4. disabled属性添加到select下的option末尾会使这一项只能默认显示，而不能在下拉菜单中再选中。

    5. multiple属性添加在select上，会使其下的所有option下拉栏默认展开

    6. select表单中，v-model绑定在select上，绑定的数据会获取当前选中的那一项的value的值，如果没写，会获取当前项在页面上的值

    7. radio单选框，value绑定内容，数据绑定其中一个内容，能产生单选的效果；

    8. 在input的type属性为number的情况下，v-model.number是让输入框的值变成数字类型 .lazy当输入框失去焦点是更新数据

  • v-once：数据只会渲染一次，即使通过双向数据绑定也无法改变

  • v-html：数据渲染成标签，会将数据通过转换渲染到界面上，比如在msg中拼接了一个h标签的字符串，那么通过v-text只能将其当成文本原封不动的渲染到界面上，但此方法会将其转化成标签，但是必须要有介质，比如

  • v-text：{{}}功能等同于v-text，把数据渲染成文本，通过本方法可以防止页面渲染时出现{{}}

  • v-for：遍历数据或对象，谁要遍历就在谁让加v-for(item,index)

    1. item：数组中当前索引项的内容，可以用item.name的形式获取其中一项属性名后的内容

    2. index：当前项的索引

{{index}}{{item.name}}{{index2+1}}{{cValue}}//最后会出现对应数量的li————————————————————————————————————————————————————————————————————books:[{name:"node权威指南",color:["red","green","orange"]},{name:"Vue入门指南",color:["pink","deepskyblue"]},{name:"react实战应用",color:["blue"]}]

  • v-on：用来给DOM元素绑定事件，v-on:click->@click:fn()这是简写的写法；

    1. 当这个方法绑定键盘事件的时候，可以同时绑定多个键位@keydown.enter.ctrl

    2. @click.prevent = fn可以阻止默认事件

    3. @click = fn($event,1)当需要传参的时候，第一个参数需要手动传入事件源，如果不传参数不要写括号，会让事件源变成undefined

  • v-if：操作DOM;;默认情况下切换dom时相同的结构会被复用，如果不需要服用，需要加key="1"，key前面不加:，后面的值为字符串，加了的话为数字

  • v-else-if：操作DOM；每一个条件语句都需要写在一个标签上，并且一个逻辑的条件语句需要联系着写，中间插入不相关的标签会报错

  • v-else：操作DOM

少于5条  大于等于5条小于10条大于10条

  • v-show：样式上的显示和隐藏，频繁的控制显示和隐藏

  • v-cloak：响应比较慢时，会看到{{}}，出现闪烁的效果，防止闪烁效果，需要在css样式里设置[v-cloak]的属性display:none

  • v-bind：绑定的属性值是动态数据

    • 直接写键值对；

    • 写成对象的方式

    • 数组的方式

    • 数组中嵌套对象[style1,style2,{red:flag}]

    • 对象+数组的方式{true:'x',false:'y'}[true]，这个例子会显示'x'的样式

    • :class="red:true"

    • :class="{red:flag,width:flag}"

    1. v-bind ""里表示变量  v-bind:src 简写:src

    2. ""中不仅可以放入变量，也可以进行字符串的拼接，与变量拼接的内容用''包起来

    3. 可以通过布尔值控制类名是否添加到当前元素上

    4. 通过驼峰式命名法，可以直接在行内设置属性，属性值用单引号包起来:style:"color:'red'"，可以在data内预设属性，形式是对象，值用单引号包裹，:style:"[sty1,sty2]"，可以将两个属性合并.

    5. 当绑定:class和:style的时候，都可以使用这几个方式：

    6. :title这个方法可以当你将鼠标悬停在当前元素上时显示一些内容

3.语法（写在Vue实例中）

  1. el：定义一个根元素，告诉vue能管理哪个部分，querySelector

  2. data：这个对象存储的属性能够在页面进行响应，修改某一属性仅仅对其进行渲染，不会重新新渲染整个页面

    • 去改变数组中的某一项是监控不到的，如vm.a[0]=100并不能修改data中a的第一项数据；可以通过vm.$set(vm.a,'school',1)的方式修改，Vue.set和前者等价，或者直接用vm.a = {}重写，占内存，不推荐。

    • 可以通过数组那些改变原数组的方法去改变data中的pop push shift unshift sort reserve splice copywithin

  3. methods：方法(函数)存储区间

    • 定义的方法名不要和data中的属性名重名

    • this指向实例

  4. computed：这里存储需要计算的属性，不能和data中的属性重名，属性必须有返回值，因此不支持异步

    • get：当计算所用的参数发生改变时，get方法会被执行，获取到计算后的值，返回给属性一个值

    • set：当手动改变计算结果的时候，触发的方法

  5. watch：当需要在数据变化时执行异步或开销较大的操作时执行这个方法

    • watch的属性名要和观察的人的名字一致，假如data里有个a属性，要监听它，则在watch里写出一个a()

    • a(newVal,oldVal)方法有两个参数，前者是变化后的数据，后者是原数据

    • 不需要返回值（但是可以设置）

    • 没有异步的情况尽量使用computed

  6. filter：过滤器，原数据不变的情况下，只是改变现实的效果，又称管道符；

    • 用法：在filter方法内定义管道符，使用的时候，将对象数据后边写上一个|，之后写上管道符并传参

  7. directives：可以在这个属性内，自定义指令，如v-color-aa，在这个属性内写成一个函数colorAA(el,bindings)，el指的是绑定的元素，bindings有个value属性可以改变样式，也可以作为条件

  8. template：如果有template属性，就没有存在的必要，不执行。template:'

    {{msg}}

    '，这个属性中不能直接写{{msg}}，必须用有且只有一个的根元素包裹起来，否则会变成文本节点，会报错


4.标签（写在DOM中）

  1. template标签：是vue提供给我们的没有任何的实际意义，用来包裹元素用的，v-show不支持这个标签使用，只有v-if可以

    • 写在这里边的内容会放到文档碎片中，如果没放在根元素下，不会在页面上显示

  2. transition标签：是vue提供给我们的实现过渡动画的标签，具体使用方法看PS中的内容。

5.方法

1..filter

过滤，不改变原数组，回调函数中return设置过滤条件，原数组中但凡符合这一项的返回true，将这一项放入新的数组中，最后返回这个新的数组；callback有两个参数，item和index；filter第二个参数改变this指向；

2.this.$http.get()：

  • $http是在Vue的原型上，所以实例可以访问

  • 括号内参数地连接地址的字符串，这个方法能获取到目标路径的数据

3.this.$http.post()：

  • 这个函数有两个参数，第一个参数是将数据发送给后台的接口，需要设置，如"/getAll"

  • 第二个参数是发送的数据，格式是对象

4.this.$http.jsonp

跨域获取数据，then是获取到数据或传送数据后做的事

this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{params:{wd:10},jsonp:"cb"}).then((res)=>{console.log(res.body);//获取到响应的数据},(err)=>console.log(err));

、

6. 编程式代码和声明式代码

  • 编程式：通过编程的方法实现功能；

  • 声明式：通过内置方法实现功能，只需要会使用，不关心如何实现；例：for循环和forEach，前者是编程式，后者是声明式。

7.axios

  • 是一种替代ajax的插件，作用和ajax，vue内置的$http相同，功能都是从服务器端获取数据，语法也基本相同。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【一】— vue入门

喜欢 ()or分享