php数组角标技巧_Vue初体验二 Vue的基本运用

文章目录 [+]

然后我们通过Vue进行渲染：

<body> <div id="app"> <h2>{{name}}，非常帅！
！
！
</h2> </div></body><script src="node_modules/vue/dist/vue.js" ></script><script> // 创建vue实例 var app = new Vue({ el:"#app", // el即element，该vue实例要渲染的页面元素 data:{ // 渲染页面须要的数据 name: "峰哥" } });</script>首先通过 new Vue()来创建Vue实例然后布局函数吸收一个工具，工具中有一些属性：el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个divdata：数据，数据是一个工具，里面有很多属性，都可以渲染到视图中name：这里我们指定了一个name属性页面中的h2元素中，我们通过{{name}}的办法，来渲染刚刚定义的name属性。

打开页面查看效果：

php数组角标技巧_Vue初体验二 Vue的基本运用

更神奇的在于，当你修正name属性时，页面会随着变革：

（图片来自网络侵删）

3.3.3.双向绑定 v-model

我们对刚才的案例进行大略修正：

<body> <div id="app"> <input type="text" v-model="num"> <h2> {{name}}，非常帅！
！
！
有{{num}}位女神为他着迷。
</h2> </div></body><script src="node_modules/vue/dist/vue.js" ></script><script> // 创建vue实例 var app = new Vue({ el: "#app", // el即element，该vue实例要渲染的页面元素 data: { // 渲染页面须要的数据 name: "峰哥", num: 5 } });</script>

我们在data添加了新的属性：num

在页面中有一个input元素，通过v-model与num进行绑定。
同时通过{{num}}在页面输出

我们可以不雅观察到，输入框的变革引起了data中的num的变革，同时页面输出也随着变革。

input与num绑定，input的value值变革，影响到了data中的num值页面{{num}}与数据num绑定，因此num值变革，引起了页面效果变革。

没有任何dom操作，这便是双向绑定的魅力。

3.3.4.事宜处理

我们在页面添加一个按钮：

<button v-on:click="num++">点我</button>这里用v-on指令绑定点击事宜，而不是普通的onclick，然后直接操作num普通click是无法直接操作num的。

效果：

4.Vue实例

4.1.创建Vue实例

每个 Vue 运用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

每个Vue实例都须要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

然后创建Vue实例，关联这个div

var vm = new Vue({el:"#app"})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。
在这个div范围以外的部分是无法利用vue特性的。

4.3.数据

当Vue实例被创建时，它会考试测验获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变革，当data发生改变，所有干系的视图都将重新渲染，这便是“相应式“系统。

html

var vm = new Vue({ el:"#app", data:{ name:"刘德华" }})name的变革会影响到input的值input中输入的值，也会导致vm中的name发生改变

4.4.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的浸染范围内利用。

html:

js:

var vm = new Vue({ el:"#app", data:{ num: 0 }, methods:{ add:function(){ // this代表确当前vue实例 this.num++; } }})

4.5.生命周期钩子

4.5.1.生命周期

每个 Vue 实例在被创建时都要经由一系列的初始化过程：创建实例，装载模板，渲染模板等等。
Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。
每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

4.5.2.钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数便是在Vue实例化是调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字便是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。
如：此时页面还是{{name}}

mounted：我们可以将他理解为原生js中的window.onload=function({.,.}),或许大家也在用jquery，以是也可以理解为jquery中的$(document).ready(function(){….})，他的功能便是：在dom文档渲染完毕之后将要实行的函数，该函数在Vue1.0版本中名字为compiled。
此时页面中的{{name}}已被渲染成峰哥

beforeDestroy：该函数将在销毁实例提高行调用。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个期间的钩子函数：

// 创建vue实例 var app = new Vue({ el: "#app", // el即element，该vue实例要渲染的页面元素 data: { // 渲染页面须要的数据 name: "峰哥", num: 5 }, methods: { add: function(){ this.num--; } }, created: function () { this.num = 100; } });

4.5.3.this

我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

methods: { add: function(){ this.num--; console.log(this); } },

5.指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的分外特性。
指令特性的预期值是：单个 JavaScript 表达式。
指令的职责是，当表达式的值改变时，将其产生的连带影响，相应式地浸染于 DOM。

例如我们在入门案例中的v-on，代表绑定事宜。

5.1.插值表达式

5.1.1.花括号

格式：

解释：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）表达式必须有返回结果。
例如 1 + 1，没有结果的表达式不许可利用，如：var a = 1 + 1;可以直接获取Vue实例中定义的数据或函数

html

var app = new Vue({ el:"#app", data:{ name:"Jack" }})

5.1.3.v-text和v-html

利用v-text和v-html指令来替代{{}}

解释：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

HTML:

JS:

var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是峰哥</h1>" }})

实行结果：

5.2.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就弗成。
接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会相互影响。

既然是双向绑定，一定是在视图中可以修正数据，这样就限定了视图的元素类型。
目前v-model的可利用元素有：

inputselecttextareacheckboxradiocomponents（Vue中的自定义组件）

基本上除了末了一项，其它都是表单的输入项。

举例：

html：

<div id="app"> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="Swift" />Swift<br/> <h1> 你选择了：{{language.join(',')}} </h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ language: [] } })</script>多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值默认是boolean类型radio对应的值是input的value值input 和textarea 默认对应的model是字符串select单选对应字符串，多选对应也是数组

实行结果：

5.3.v-on

5.3.1.基本用法

v-on指令用于给页面元素绑定事宜。

语法：

v-on:事宜名="js片段或函数名"

<div id="app">  <button v-on:click="num++">增加一个</button><br/>  <button v-on:click="decrement">减少一个</button><br/> <h1>有{{num}}个女神迷恋峰哥</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:100 }, methods:{ decrement(){ this.num--; } } })</script>

效果：

5.3.3.按键润色符

在监听键盘事宜时，我们常常须要检讨常见的键值。
Vue 许可为 v-on 在监听键盘事宜时添加按键润色符：

记住所有的 keyCode 比较困难，以是 Vue 为最常用的按键供应了别名：

<input v-on:keyup.enter="submit"><input @keyup.enter="submit">

全部的按键别名：

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

5.3.4.组合按钮

可以用如下润色符来实现仅在按下相应按键时才触发鼠标或键盘事宜的监听器。

.ctrl.alt.shift

<input @keyup.alt.67="clear"><div @click.ctrl="doSomething">Do something</div>

5.4.v-for

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

语法：v-for="item in items"

items：要遍历的数组，须要在vue的data中定义好。
item：迭代得到的数组元素的别名

<div id="app"> <ul> <li v-for="user in users"> {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { users:[ {name:'柳岩', gender:'女', age: 21}, {name:'峰哥', gender:'男', age: 18}, {name:'范冰冰', gender:'女', age: 24}, {name:'刘亦菲', gender:'女', age: 18}, {name:'古力娜扎', gender:'女', age: 25} ] }, })</script>

实行结果：

5.4.2.数组角标

在遍历的过程中，如果我们须要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"items：要迭代的数组item：迭代得到的数组元素别名index：迭代到确当前元素索引，从0开始。

示例

<ul> <li v-for="(user, index) in users"> {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}} </li> </ul>

效果：这里可以看到人名前面有索引

5.4.3.遍历工具

v-for除了可以迭代数组，也可以迭代工具。
语法基本类似

语法：

v-for="value in object"v-for="(value,key) in object"v-for="(value,key,index) in object"

示例：

1个参数时，得到的是工具的属性2个参数时，第一个是属性，第二个是键3个参数时，第三个是索引，从0开始

<div id="app"> <ul> <li v-for="(value, key, index) in user"> {{index + 1}}. {{key}} - {{value}} </li> </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'峰哥', gender:'男', age: 18} } })</script>

效果：

5.5.v-if和v-show

5.5.1.基本利用

v-if，顾名思义，条件判断。
当得到结果为true时，所在的元素才会被渲染。

语法：

v-if="布尔表达式"

示例：

5.5.4.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。
用法大致一样：

<h1 v-show="ok">Hello!</h1>

示例：

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是大略地切换元素的 CSS 属性 display。

5.6.v-bind

html属性不能利用双大括号形式绑定，只能利用v-bind指令。

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外，还可以是工具或数组。

<div id="app">  <div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { title: "title", } })</script>

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外，还可以是工具或数组。

5.6.1.绑定class样式

数组语法

我们可以借助于v-bind指令来实现：

<div id="app"> <div v-bind:class="activeClass"></div> <div v-bind:class="errorClass"></div> <div v-bind:class="[activeClass, errorClass]"></div></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var app = new Vue({ el: "#app", data: { activeClass: 'active', errorClass: ['text-danger', 'text-error'] } })</script>

工具语法

我们可以传给 v-bind:class 一个工具，以动态地切换 class：

你可以在工具中传入更多属性来动态切换多个 class。
此外，v-bind:class 指令也可以与普通的 class 属性共存。
如下模板:

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在工具中传入更多属性来动态切换多个 class。
此外，v-bind:class 指令也可以与普通的 class 属性共存。
如下模板:

和如下 data：

data: { isActive: true, hasError: false}

结果渲染为：

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。
本例中isActive为true，hasError为false，以是active样式存在，text-danger不存在。

常日情形下，绑定的数据工具不必内联定义在模板里：

数据：

data: { classObject: { active: true, 'text-danger': false }}

效果和之前一样：

5.6.2.绑定style样式

数组语法

数组语法可以将多个样式工具运用到同一个元素上：

data: { baseStyles: {'background-color': 'red'}, overridingStyles: {border: '1px solid black'}}

渲染后的结果：

工具语法

v-bind:style 的工具语法十分直不雅观——看着非常像 CSS，但实在是一个 JavaScript 工具。
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

数据：

data: { activeColor: 'red', fontSize: 30}

效果：

5.8.watch

watch可以让我们监控一个值的变革。
从而做出相应的反应。

示例：

<div id="app"> <input type="text" v-model="message"></div><script src="./node_modules/vue/dist/vue.js"></script><script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"" }, watch:{ message(newVal, oldVal){ console.log(newVal, oldVal); } } })</script>

总结：关于怎么Vue的基本利用就先容到这里。
在这篇文章之前有一篇入门文章。
是关于Vue项目搭建的。
喜好的话欢迎大家收藏转发。
同时也顺便关注一下我。