vue-学习笔记（更新中...）-白红宇

vue-学习笔记（更新中...）

阅读量：6656 次

发布时间：2019-06-25

本文共 15022 字，大约阅读时间需要 50 分钟。

vue学习笔记

2017-08-23 11:10:28

Vue实例：

1 var vm = new Vue({2   // 选项3 })

实例化Vue、Vue实例，构造函数Vue、创建一个Vue的根实例，Vue实例气筒Vue,js应用

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

步骤：

　　　　　　　　指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-bind:class 切换或增加类名，就是绑定类名，两种写法：

v-bind:class=“类名”

:class=“类名”//v-bind的简写格式，只留一个冒号，去掉冒号前边的v-bind

v-bind:style 的对象语法是一个 JavaScript 对象。

CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

或者把数据用变量替换，动态修改样式的值：

v-bind:style="{color: divColor, fontSize: divFontSize + 'px', 'border-bottom-color': divBC}"

直接绑定到一个样式对象通常更好，让模板更清晰：

data中：

divStyle: {

　　color: 'red',

　　fontSize: '18px',

　　'border-bottom-color': 'blue'

}

　v-else-if、v-else 搭配v-if

　　 v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

if条件成立

else-if的条件成立

if条件不成立，else-if条件也不成立，显示else

v-show=”等于布尔值得变量名字、直接布尔值” [用于控制元素是否展示，也是根据条件展示元素的选项。]

不过他和if的不同之处是：

v-show的核心原理是通过切换元素css的display来控制元素的显示。当v-show为真值时，该元素的display=block，反之为none。

但是不管在页面中显不显示，他始终在html的源码dom结构中，总是都被渲染出来了。你观察源代码或者看控制台，他还是在的。

而if指令所在的标签行，如果if条件不成立，那么标签行就不会被渲染出来，控制台中也找不到他的尸体。

我是v-show成立的（bool在data中等于true）

我是v-show没有成立的，但是我依旧存在dom中，你在控制台、源代码处还能看到我哦（bool在data中等于false)

我是v-show没有成立的，等号右边除了传入变量也可以传入boolean值来判断是否显示

第三种写法

v-for="(name,key,index) in json" 视图引用：{

{name}}值，{

{key}}键名，{

{index}}索引号

v-on: 事件名=“函数名” [绑定一个事件]

事件名： click、dblclick、mouseover、mouseout、mouseup、mousedown

写法两种：【以click事件为例】

1) v-on:click = “clickFun”

2) @click = “clickFun”//v-on的简写格式,去掉v-on和冒号，改写成@符号

注意

事件对应的处理函数，要放在Vue示例的data后边，专门一个methods[一定要是这个名字]对象里边，当做json数据列好了备用。比如：

data{

　　msg: “aaa”

　　...

methods: {

　　clickFun: function(){

　　　　console.log（...）;

　　　　...[这里边的代码和原生js没啥区别了]

　　}，

　　clickFun2： function($event){

　　　　【$event: 事件对象参数，支持很多原生用法。比如阻止冒泡：$event.cancelbubble、阻止默认行为：$event.preventDefault；等】

　　}

v-once [一次性插值]

即当数据被再次动态的改变时，绑定在此节点上的所有属性对应的数据将不会被动态更新

这个数据一次性传进来后将不再改变：{

{msg}}

v-html=“键名”[此属性的值将作为所在标签的内容，并将按照html文档被解析。键名对应的值，是一个包含html标签的字符串]、v-text="键名"[不翻译标签直接输出]

注意;键名对应的属性值里边的数据绑定不会被解析出来，会当做字符串直接输出出来。比如{

{msg}} => {
{msg}}、

请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。

html

result

定义组件化模块

Vue.component(‘组件名称’,{

　　props: [‘属性名’]; //自定义属性

template: “写html结构” //可以用差值传参，例如template: "<li>{

{todo.id}}、{

{todo.text}}</li>"

});

参数放在data内

new Vue（{

　　el: “#app”,

　　data:{

　　　　groceryList: [

　　　　　　{id: 1, text: "苹果"},

　　　　　　{id: 2, text: "香蕉"},

　　　　　　{id: 3, text: "菠萝"}

　　　　]

　　}

}）

html结构中：

<ol>

<组件名称

　　v-for=“item in groceryList”(空格)

　　v-bind:属性名 = “item”(空格)

　　v-bind:key = “item.id”//自定义的，可以没有

</组件名称>

</ol>

结果：

vue学习出现问题汇总
序号	问题、知识点	备注
1	vew Vue({})	V要大写
2	data数据	所有的数据要放到对应el位置的data里边
3	v-model=“msg”	等号后边不用花括号了
4	el区域与调用	调取vue里边的data数据，要在el指定的区域里
5	循环v-for=“value in arr”	写法上，是for in的结构，(遍历值在数组中)
6	索引值 $index、$key不出现	用1.0版本的指令配合2.0版本的js，当然各种报错，注意版本的匹配
7	For（k,v）in json k/v反了	反过来就好了

代码：

html：

index.js

1   2   3   4     
        5     vue study  6     
        7        8      11  12  13     
      
        14         
       第一个vue实例
 15             {
     {msg}} 16         
       常用指令
 17         
       
         18             
        v-model双向数据绑定
 19             
        
         它能轻松实现表单输入和应用状态之间的双向绑定。现在就去改变其中一个input吧。
        
        
 20             
         21             
         22             
        
 23             
        
         v-model监听输入和下拉，随时展现——input
        
 24             
        
          25                 
          26                 
         modelTest内的值是：
         
          {
    {modelTest}}
         
         
 27             
        
 28             
        
         下拉select，随时展现
        
 29             
        
          30                 
          36                 
         modelTest内的值是：
         
          {
    {modelTest2}}
         
         
 37             
        
 38         
       
 39         
       
         40             
        v-bind:属性名 在dom元素上绑定属性
 41             
        
         只有你想不到，没有他绑不到，只要你想到的属性，都用它来绑上去吧！
        
     42             
        
         1、{
    {titleTxt}}
        
 43             
        
         2、文档中的bind案例，将时间对象Date()加载进来，并转成字符串形式，放到title里边了。——{
    {titleTest}}【看来，数据里边的变量，也支持加入原生js，混合成一个新的数据】
        
 44             
        
         3、我被绑定了style属性,用字符串的形式把所有的样式传进来了
        
 45             
        
         4、我绑定style,在标签内通过大括号绑定于自身，并把数据当做变量传进来。注意双引号里边的大括号不要丢掉。
        
 46             
        
         5、我绑定了一个json的样式对象，对象里边的数据都是变量、动态的，标签这里只用传入对象名字。也很清爽
        
 47             
        
         绑定class的应用，就是可以用来切换class进而切换状态的，在v-on:mouseover函数那里应用了，
        
 48             
        
         可以字符串拼接、可以传入一个对象、可以和普通的class同时存在
        
 49             
        
v-bind:class传入字符串拼接 50             
        {
    {item}}
 51             v-bind:class传入对象： 52             
        对象
 53         
       
 54         
       
         55             
        v-if="variate" 根据条件展示元素的选项
 56             
        
          variate = 布尔值对应的变量
        
 57             
        
          58                 
         bool是true，你看的到我。我还有个兄弟你看不到
 59                 
         boolF是flase，你看的到我
 60             
        
 61             
        
          v-if 渲染一组代码
        
 62             
         67             
        v-else-if
 68             
        if条件成立
 69             
        else-if条件成立
 70             
        if和else-if的条件都不成立，else条件成立
 71             
        v-else
 72             
        
         v-else 需要配合v-if合作完成.v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
        
 73             
        if条件成立，显示我了我是v-if里边的a标签
 74             
        if条件不成立，显示else的结果我是v-else里边的a标签
 75         
       
 76         
       
         77             
        v-for 循环  数组/Json对象
 78             
        
         数组中有value代表数值，也有$index做索引值
        
 79             
        
          80                 
         值——"{
    {value}}"，索引——"{
    {index}}"
 81             
        
 82             
        v-for 循环  json
 83             
        
         json中有value代表数值，也有$index做索引值，还有$key代表键名，k、v也可以代表键名的对应值
        
 84             
        
        
         遍历一维数组
        
 85             
        
          86                 
         值：{
    {item}}
 87             
        
 88             
        
         遍历json【对象】
        
 89             
        
          90                 
         {
     {k}}—键名， {
     {v}}—value值 91                 
 92             
        
 93             
        
         遍历json（对象），获取索引值
        
 94             
        
          95                 
         （值、索引、键名）{
    {name}}--{
    {index}}--{
    {key}}
 96             
        
 97             
        
         遍历二维数组
        
 98             
        
          99                 
         {
    {item.value}}、{
    {item.text}}
100             
        
101         
       
102         
       
        整数迭代
       
103         
       
        104             
         {
    {n}} 105         
       
106         
       
        107             
        v-on:事件名 = "函数名" 监听交互，添加监听器 
108             
        
         事件名：click、dblclick、mouseover、mouseout、mousedown、mouseup
        
109             
        点击我就惊奇了【v-on:命令点击】
110             
        点击我就惊奇了【@点击】
111             
        双击我就更惊奇了
112             
        鼠标经过我啊
        
113             
        
         哈哈我来了
        
114             
        
         哈哈我来了
        
115             
        116         
       
117         
       
        118             
        组件化模块 
119             
        
         然实现了批量生产，但是生产的都是一样的。不能复用
        
120             
        
         121                 
         122                 
         123                 
         124                 
         125             
        
126             
        组件化模块【传参】 
127             
        
         传入参数数据，这样组件就可以重用了
        
128             
        
         129                 
         
          133                     
          134                 
         135             
        
136         
       
137         
       
        138             
        v-once 一次性插值
139             
        
         一次性插入，这个节点上所有插值再次动态更改数据不会更新
        
140             
        普通节点上的数据展示：{
    {msgOnce}}
141             
        一次性属性所在节点上的：{
    {msgOnce}}
142             
        143         
       
144         
       
        145             
        v-html 纯HTML、v-text 纯文本，
146             
        
         v-html 输出真正的html。v-text不翻译标签直接输出
        
147             
         
148             
         
149         
       
150         
       
        151             
        "插值——{ { javascript 表达式 } }"
152             
        
         运算符表达式 num + 1
        
153             
        num+1 = {
    {num + 1}}
154             
        
         三元表达式 ok?'YES'':'NO'
        
155             
        {
    {bool? "bool现在是：true":"bool现在是：false"}}
156             
        
         链式调用方法表达式 arrReverse.reverse().join("-")
        
157             
        arr的length:{
    {arrReverse.length}},arr翻转：{
    {arrReverse.reverse().join("-")}}
158             
        
         字符串拼接 v-bind:id="'list_'+ v"
        
159             
        
         160                 
         {
    {key}}-{
    {index}}
161             
        
162         
       
163         
       
        164             
        v-show 根据条件展示元素的选项
165             
        
         同v-if一样，都是根据条件展示元素的选项。其核心是，切换元素的display，也就是说，不管显不显示他都会被渲染到html的dom结构中去，而if不会。if条件如果不成立，则if指令所在的元素将不会被渲染再dom中
        
166             
        我是v-show成立的
167             
        我是v-show没有成立的，但是我依旧存在dom中，你在控制台、源代码处还能看到我哦
168             
        我是v-show没有成立的，等号右边除了传入变量也可以传入boolean值来判断是否显示
169         
       
170         
       
        171             
        数组 变异方法
172             
        
         它们也将会触发视图更新
        
173             
        
         174                 
         {
    {item}}
175             
        
176         
       
177         
       
        178             
        事件修饰符
179             
        
         它们用于v-on:事件名之后，用点表示指令。修饰符也可以一次使用多个，可以串联。但是串联使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
        
180             
        v-on:click.stop.prevent = "函数名"
181             
        
         182                 
         {
    {item}}
183             
        
184             
        
         键值修饰符：监听键盘事件时添加关键修饰符
        
185             
        v-on:keyup.13 = "函数名"
186             
        Vue 为最常用的按键提供了别名：
187             
        
         188                 
         {
    {item}}
189             
        
190             
        
         可以通过全局 config.keyCodes 对象自定义键值修饰符别名：191                 
         Vue.config.keyCodes.f1 = 112
192             
        
193         
       
194 195

View Code

vueJson.js

1 window.onload = function(){ 2         // 创建一个组件化模板（就是你往里边传数据就行，他自动创建结构 3             Vue.component("todo-item",{ 4                 template: "我是组件化模板创建的
" 5             }); 6             // 创建另一个可以传数据的组件模板.创建模板用的component就和function一样是固定写法，多个也要用这个单词，不要改变，不然不算一个函数，就好像你写function和function2的区别一样。 7             Vue.component("todo-data",{ 8                 props: ["todo"], 9                 template: "{
    {todo.id}}、{
    {todo.text}}
"10             });11             new Vue({12                 el: "#viewBox",13                 data: {14                     modelTest: "",15                     modelTest2: "",16                     msg: "hello vue！", //字符串17                     msgOnce: "hello xing.org1",18                     aHtml: "我可是纯正的a标签哦，如果不是v-html的帮忙，我的标签就解析不出来了拉！
{
    {msg}}数据绑定被忽略了",19                     aText: "我也是纯正的a标签啊！用了v-text，就把我的标签符号当文本用了吗？
{
    {msg}}数据绑定ye被忽略了",20                     model: "vue实现数据的双向绑定",21                     num: 1, // 数字22                     bool: true, //布尔23                     boolF: false, 24                     boolF2: false, 25                     arr: ["我","是","for","循","环"], // 数组26                     arrReverse: ["h","e","l","l","o"], // 数组27                     idAdd: [1,2,3,4,5], // 数组28                     pListId: [1,2,3], // 数组29                     json: {"a":"1","b":"3"}, // json30                     jsonSec: [31                         {"value":"1","text":"hello"},32                         {"value":"2","text":"vueMan"}33                     ],34                     titleTxt: "我是绑定到标签title属性中的内容",35                     titleTest: '页面加载于 ' + new Date().toLocaleString(), //原生js方法代码,内置对象,加号链接, 36                     bindStyle: "padding: 10px 0;font-weight: bold;margin-top: 5px;color: #4488ff",  //绑定style37                     className: "",38                     groceryList: [39                         {id: 1, text: "苹果"},40                         {id: 2, text: "香蕉"},41                         {id: 3, text: "菠萝"}42                     ],43                     divColor: "blue",44                     divFontSize: 16,45                     divBC: "red",46                     divStyle: {47                         color: 'red',48                         fontSize: '18px',49                         'border-bottom-color': 'blue'50                     },51                     arrMethods: ["push()","pop()","shift()","unshift()","splice()","sort()","reverse()"],52                     eventMethods: [".stop：阻止单击事件冒泡",".prevent：阻止默认行为",".capture：使用事件捕获模式",".self：事件发生在自身时",".once：事件将只会触发一次"],53                     keyMethods: [".enter：回车键",".tab",".delete:删除或退格",".esc",".space",".up",".down",".left",".right"]54                 },55                 methods:{56                     clickFun: function(){57                         console.log(this.bool);58                         this.bool = false;59                         this.boolF = true; 60                     },61                     dblClickFun: function(){62                         this.bool = true;63                         // this.boolF = true;64                     },65                     overFun: function(){66                         this.boolF2 = true;67                     },68                     outFun: function(){69                         // this.boolF2 = false;70                         this.className = "outSpan";71                         console.log(this.className)72                     },73                     downFun: function(){74                         console.log("您已按下鼠标");75                     },76                     upFun: function(){77                         console.log("您已收起鼠标");78                     },79                     onceFun: function(){80                         console.log(this.msgOnce)81                         this.msgOnce = "hi, uh, what i should to say? hah,hello xing.org1,are you ok? how old are you? Nice to meet you！"82                     }83                 }84             })85         }

vueJson.js

效果图：