title: vue基础总结
date: 2018-1-21 10:53:33
categories: Vue
写在前面:
主要记录一下vue在平时使用中和学习中的一些总结; 相关内容总结都是基于了通读这本书来做的,首先是基础篇的内容...
VUE学习
vue是什么?
根据概念来说,vue是一套用于构建用户界面的渐进式框架; 以我初学者的角度来说(基础性理解)我觉得vue就是一套用数据来渲染DOM结构的系统,它给了模板,我们只需要把处理好的数据填充进去就好...
vue的使用
vue使用基本步骤
// 创建vue实例
1.先引入框架文件vue.js
2.使用Vue构造函数 实例化一个vue对象; new Vue({...})
3.在实例的初始化过程中添加必要的配置: 即必要的属性和方法!!!
4.这些属性和方法都是哪些呢?在之后的内容会逐一介绍
1.el属性: (DOM元素或选择器) 就是HTML结构中模板元素,也是vue实例要 操作的DOM对象
2.data属性: 模板中的数据来源 { 模板变量: 数据 }
3.生命周期钩子; vue实例在创建-执行-结束整个过程会执行的一些方法,如created,mounted,beforeDestroy
4.methods属性: 存放一些事件的处理逻辑
5.本篇先暂时介绍这几个....
// 准备vue实例要用的html模板
1.vue实例与要与dom元素绑定才能对其进行相应操作,所以要准备好模板元素
2.接下来就可以向模板中传值(也可以叫插值),{{变量名}}要与实例的data属性中的字段一样
3.{{花括号中也可以使用js的简单的表达式}}
// html模板中使用vue指令和事件
1.在DOM元素的标签中插入指令; 插值支持模板字符串写法
2.可以理解为往行内元素添加属性和值; 只不过它们它们的属性只是一个变量或者说对象,可以随意改变
3.当指令对应的值发生改变就会 执行值对应行为并反馈到DOM元素上
4.这一节学习的指令和事件:
v-if: 条件指令
v-html: 只会输出真正的 HTML; 慎用!!!不要使用用户的值进行插入,容易导致XSS攻击
v-pre: 加了v-pre可以随意输出,{{}}中的内容不会被解析
v-bind: 使用v-bind:href 可以动态更新行内属性; 简写方式 :href="字段名"; :src="字段名";
v-on: 用来绑定事件;<button v-on:click="方法名">点击;方法名也可以写成行内语句,简写的话就是 @click="方法名"
v-for: 用来遍历数组和对象 (item,index) in arr
v-model指令: 表单输入绑定,监听用户的输入事件来更新数据
//<input v-model="属性名">: 其本质是 输入事件@input 对输入框输入值进行监听,上面代码等价于 <input :value="属性" @input="属性=$event.target.value">; 即绑定value值&&绑定input事件
v-model可以实时给input赋值和取值
// v-model在select列表(注意option的value值) && radio单选 && checkbox(注意v-model绑定数组)多选下 要有对应的value值
2.下面上两个实践的例子
-
demo1
hello,{{ name }}
{{ text }} 花括号中放 vue实例 data属性中的一个字段
当前时间:
加了v-pre可以随意输出,不会被解析 {{ xxoo }}
在{{}}中写JavaScript代码: 只支持单个表达式,不支持语句和流程控制
{{ `支持模板字符串语法: 这是一个模板字符串拼接: ${name}` }}
{{ name.split('').join("=") }}
filters属性 {{ 变量 | 过滤器函数(),可以串联多个; 还可以传参; 主要是对数据进行简单的文本处理 }}
{{ data | formatData }}
|
