vue基础性总结

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指令: 表单输入绑定,监听<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>的输入事件来更新数据
    //<input v-model="<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>名"&gt;:  其本质是 输入事件@input 对输入框输入值进行监听,上面<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>等价于 <input :value="<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>" @input="<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>=$event.target.value"&gt;; 即绑定value值&amp;&amp;绑定input事件
    v-model可以实时给input赋值和取值
    // v-model在select列表(注意option的value值) &amp;&amp; ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>单选 &amp;&amp; check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>(注意v-model绑定数组)多选下 要有对应的value值

2.下面上两个实践的例子

1. demo1

   
   hello,{{ name }}
   
   
   {{ text }}   花括号中放 vue实例 data属性中的一个字段 
   
   
   
   当前时间: 
   
   
   在这里写东西好像不起作用,这里放的data中html标签内容}}
   
   
   
    加了v-pre可以随意输出,不会被解析  {{ xxoo }} 
   
   
   在{{}}中写JavaScript代码: 只支持单个表达式,不支持语句和流程控制
   
   {{ `支持模板字符串语法: 这是一个模板字符串拼接: ${name}` }}
   
   
   {{ name.split('').join("=") }}
   
   
   
   
            filters属性 {{ 变量 | 过滤器函数(),可以串联多个; 还可以传参; 主要是对数据进行简单的文本处理 }}  
           
   
           {{ data | formatData }}