vue.js(一)

之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点

注意:下面的所有与vue相关的标签、指令都是写在id="app"的div之内的。

1.vue对象的写法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div> <script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>

浏览器显示:

vue.js(一)

我们在控制台输入一些命令,看他的变化:

vue.js(一)

看到这,你应该意识到,我们可以通过js来改变这个vue对象的变量值,从而改变浏览器窗口中页面内容的显示。

2.指令系统

先贴上相关指令的用法,后面会对其中部分指令作详解。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<p v-once>这个将不会改变: {{ message }}</p>
<p v-bind:title="message">绑定了title属性</p>
<p v-if="seen">if语句</p>
<p v-bind:id="message">绑定了id</p>
<a v-bind:href="message">绑定了href</a>
<p>输出html: <span v-html="rawHtml"></span></p>
<p>这里用computed属性实现对message值的反转:{{reversedMessage}}</p>
<p class="static" v-bind:class="{ active: isActive, textdanger: hasError }">根据对象的vaule值绑定class(内联写法)</p>
<p class="static" v-bind:class="classObject">根据对象的vaule值绑定class(Object写法)</p>
<p v-bind:style="{ color: activeColor, fontSize: fontSize }">Hello World(内联写法)</p>
<p v-bind:style="styleObject">Hello World(Object写法)</p>
<input v-model="message" placeholder="edit me">
<p>v-model实现双向数据绑定: {{ message }}</p>
<ol>
<li v-for="todo in todos">
<ol>
<li v-for="item in todo.list">
{{item.key}}
</li>
</ol>
</li>
</ol>
<button v-on:click="reverseMessage">绑定了单击事件的methods</button>
<button v-bind:disabled="seen">绑定了disabled属性</button>
</div> <script >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
seen:true,
rawHtml:"<a style='color:red' href='##'>content</a>",
isActive:true,
hasError:false,
classObject: {
active: true,
textdanger: false
},
activeColor: 'red',
fontSize: '18px',
styleObject: {
color: 'red',
fontSize: '13px'
},
todos: [
{ name: '学习 JavaScript',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '学习 Vue' ,list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] },
{ name: '整个牛项目',list:[{key:"键1",value:"值1"},{key:"键2",value:"值2"}] }
]
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join(''); }
},
computed: {
//默认是getter方法
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
} })
</script>
</body>
</html>

3.计算属性:computed。

上面我们可以看到,通过方法methods和计算属性computed都可以实现对数据message值的反转的操作。

但是,注意了,methods属性里面的方法不能有返回值且前台不能够直接调用,不然前台显示function () { [native code] }

methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('');
}
}, 前台调用:
<p>这里用methods属性实现对message值的反转:{{reverseMessage}}</p>

前台显示:

vue.js(一)

所以,一般methods方法用来处理事件而不是用来显示文本,对于显示文本,一般用计算属性来解决computed。像下面这样:

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[]
this.lastName = names[names.length - ]
}
}
}
<p>前台调用全名:{{fullName}}</p>
<p>前台调用firstName:{{firstName}}</p>

(注意:data中只定义了firstName和lastName)

然后我们在控制器或者js中执行“setter”方法:

app.fullName="Jason Chen";

此时,data中的firstName和lastName都将发生改变,而这一切,在这里都不作记录了。。。

重点来了:

计算属性是会产生缓存的,计算属性是基于它们的依赖(在上面的例子中计算属性fullName的getter方法是依赖firstName和

lastName)进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖变量的值还没有发生

改变,多次访问fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我

们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!有了缓存之后直接获取之前getter

方法的缓存,而不用再次执行A的getter方法了。

4.true和false

就像上面看到的那样,很多时候我们需要定义一个是非值变量,来作用于if语句或者class绑定值,我发现书写时会出现三种方式

data:{
  seen1:true,
  seen2:'任意字符',
  seen3:任意字符
}

对于第一种,vue会当做“真”值处理;对于第二种,vue也会当做“真”值处理;对于第三种,当然是。。。。。报错!

5.变量的声明

对于vue变量的声明,根据变量名里有无特殊符号要作以下处理(单引号):

data:{
  'text-content':'这里是变量的值',
  textcontent:'这里也是变量的值'
}

 6.v-if指令

v-if作为一个指令,必须写在一个标签上

   <div v-if="seen1">
<h1>hello world</h1>
<h3>hello vue</h3>
</div>    <template v-if="seen1">
<h1>hello world</h1>
<h3>hello vue</h3>
</template>

上面两者的区别就是,DOM渲染的时候,第一个会显示div标签,而第二个不会显示template标签

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B
</div>

if-else语句浅显易懂,无须多作解释。下面引入key来处理vue复用元素的做法

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>

当我们动态改变loginType的值的时候,看似会出现不同的label和input,实际上并没有重新渲染DOM,

我们在第一个input输入了值之后,再切换loginType值之后,之前输入的值会出现“第二个”input之中,所以这实际上是复用了DOM元素,

在切换状态的时候,仅仅对元素内容作了修改,那么就会存在一个问题,当我们输完Username之后,切换到Email输入界面,

这里的input框由于不是重新渲染的,那么就会默认保留之前输入的Username值,那要怎么处理呢?

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

这样,每次切换时,用key标识的输入框都将被重新渲染。

v-if是惰性的,只有在条件为真时,DOM才会渲染,如果初始化的时候条件为假,DOM是不会渲染的,直到条件为真。

相对应的有个v-show指令,这个指令无论条件为真为假都会渲染DOM,只是会根据条件改变display属性的值。

上一篇:人工神经网络--ANN


下一篇:【机器学习】人工神经网络ANN