Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。

 var App = new Vue({
el: "#root",
data: {
message: "asdasdasd"
}
)};
App.$weach("message",function(newVal,oldVal) {
console.log(newVal);
console.log(oldVal);
});
//es6中的箭头函数中的this并不是实例,要使用是用实例,可使用实例的对象App.message = "assassin";

模板语法

{{}}差值表达式

v-text="message" <=> {{}}
message: "<h1>asjkfjaklsfj</h1>"

<div v-html="message"></div>

javascript表达式

在差值里面可以书写JavaScript表达式

{{message.split('').reverse().join('')}}
//不能执行语句,都只能是单个的表达式。

修饰符

.prevent: 阻止默认事件

.stop:组织时间冒泡

过滤器

var app = new Vue({
el: "#root",
template: `<div>{{message | upperCase | lowerCase}}</div>`,//message 后面 | 过滤函数,相应的过滤函数在filter对象中定义
data: {
message: "assassin"
},
filters: {
upperCase: function(value) {
return value.toUpperCase();
},
lowerCase: function(value) {
return value.toLowerCase();
}
}
});

计算属性

把我们的数据在的处理在输出

var app = new Vue({
el: "#root",
template: `<div>{{reverseMsg}}</div>`,
data: {
message: "assassin"
},//这这里不能使用methods
computed: {//把我们的数据在的处理在输出
reverseMsg: function(value) {
return this.message.split("").reverse().join("");
}
}
});

两者之间的区别:

methods:每次dom重新渲染。

computed:dom渲染时有缓存。依据是实例内部的变量等,发生变化时,才会重新渲染。

var app = new Vue({
el: "#root",
template: `<div>
<input v-model="firstName">
<input v-model="firstName">
<div>{{fullName}}</div>
</div>`,
data: {
firstName: "",
lastName: ""
},
computed: {
lastName: function() {//挡firstName,lastName这两个内部依赖变化时,就开始重新计算,依赖不变,使用缓存。
return this.firstName + " " +this.lastName;
}
}
});

watch侦听属性

var app = new Vue({
el: "#root",
template: `<div>
<input v-model="firstName">
<input v-model="firstName">
<div>{{fullName}}</div>
</div>`,
data: {
firstName: "",
lastName: "",
fullName: ""
},
watch: {
firstName: function() {
return this.fullName = this.firstName + " " +this.lastName;
},
lastName: function() {
return this.fullName = this.first
}
}
});

相比较computed,computed的比较简洁。

computed的set属性和get属性

var app = new Vue({
el: "#root",
template: `<div>
<input v-model="firstName">
<input v-model="firstName">
<div>{{fullName}}</div>
</div>`,
data: {
firstName: "",
lastName: ""
},
computed: {
fullName: {
get: function() {
return this.firstName+" "+this.lastName;
},
set: function(value) {
var arr = value.split("");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});

demo:

var app = new vue({
el: "#root",
templete: `
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{answer}}</p>
</div>
`,
data: {
question: " ",
answer: "I cannot give you an answer uniter you ask a question!"
},
watch: {
question: function() {
this.answer = "Wating for you to stop typing...";
this.getAnster();
}
},
methods: {
getAnster: function() {
if(this.question.indexOf("?") === -1) {
this.answer = "Questions usually contain a question mark.";
return ;
}
this.answer = "Thinking...";
var _this = this;
/*
axios.get("https://yesno.wtf/api").then(function(response) {
_this.answer = response.data.answer;
}).catch(function(error) {
_this.answer = "Error! Could not reach the API."+error;
});
*/
if(app.timer) {
clearTimer(app.timer);
}
app.timer = setTimeout(function() {
axios.get("https://yesno.wtf/api").then(function(response) {
_this.answer = response.data.answer;
}).catch(function(error) {
_this.answer = "Error! Could not reach the API."+error;
});
},200);//利用定时器进行优化
}
}
})

class和style

<div v-bind:class="{active: isActive}"></div>
//active 类名, isActive: 布尔值
<div v-bind:class="{active: isActive,'text-danager': hasError}"></div>
//text-danager,中间有线,所以要加单引号。
...
data: {
isActive: true
}
computed: {
hasError: function() {
return false;
}
}
//同样可以写在methods中实现,但不能重复实现过程。

上面可等价:类的对象形式

var app = new Vue({
el: "#root",
template: `<div v-bind:class="classObj">{{message}}</div>`,
data: {
message: "heelo world",
isActive: true,
hasError: false,
classObj: {
active: true,
'text-danager': false
}
},
computed: {//classObj也可以在computed中实现
classObj: function() {
return {
active: this.isActive,
'text-danger': this.hasError
}
}
}
});//case:tab

类的数组形式

var app = new Vue({
el: "#root",
template: `<div v-bind:class="[a,b]">{{message}}</div>`,
data: {
a: "active",
b: "text-danger"
},
computed: {//classObj也可以在computed中实现
classObj: function() {
return {
active: this.isActive,
'text-danger': this.hasError
}
}
}
});

内联样式:

var app = new Vue({
el: "#root",
template: `<div v-bind:style="{fontSize: fontSize + 'px'}">{{message}}</div>`,
data: {
fontSize: 30
}
});

内联样式的对象形式:

var app = new Vue({
el: "#root",
template: `<div v-bind:style="styleObj">{{message}}</div>`,
data: {
styleObj: {
color: "red",
fonSize: "30px",
display: ['-webkit-box', '-ms-flexbox', 'flex']//经过js处理在浏览器端会出现相应的属性
}
}
});

条件渲染

多条件组选择:

<template v-if="isTrue">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<template v-else="isFalse">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
//在浏览器DOM中是不渲染的。
v-if="条件表达式"
<template v-if="number == 1">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<template v-else-if="number == 2">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<template v-else>
<div>1</div>
<div>2</div>
<div>3</div>
</template>
var app = new Vue({
el: "#root",
data: {
number: 1
}
})

key值管理服用的元素

<div id="root">
<template v-if="loginType === 'username'">
<label>UserName<label>
<input placeholder="Enter your name" v-model="usename">
</template>
<template v-else>
<label>Email<label>
<input placeholder="Enter your email" v-model="email">
</template>
<button v-on:click="handleClick">toggle login style</button>
</div>
var app = new Vue({
el: "#root",
data: {
loginType: "usename",
username: "",//防止输入框中的数据清除
email: ""
},
methods: {
handleClick: function() {
if(this.loginType === "username") {
this.loginType = "email";
}else{
this.loginType = "username";
}
}
}
});
//这样使得切换的input输入的值不会发生变化,vue.js中处于对渲染的优化,解决办法在不同的input中添加key值,即可区分开来。这样有个小问题,切换之后输入框中的值不存在,分别绑定model值,即可解决。

列表的渲染

v-for="(item,key) in items"
v-for="(item,key) of items"
两者用法完全相同,
<div v-for="(item, key, index) in object" v-bind:key="item.id">
{{index}}{{key}}{{value}}
</div>

在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

这几种循环要谨慎使用,键值因不同的浏览器恶如输出不同的结果。循环的时候一般都要绑定key

数组的方法:

vue不会像新增内容上增加getter,setter,也就是双向绑定失效。所以对数组的操作要有新的语法。

变异方法:也就是对原有数组的方法进行了改变。

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

不能直接修改等,this.items[indexOfItem] = newValue。如下:

this.items.push({ message: 'Baz' });

事件

<div id="root">
<div id="counter-event-example">
<p>{{total}}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div> <script>
//定义局部子组件
var button = {
template: `<button v-on:click="increment">{{counter}}</button>`,
data: function() {
return {
counter: 0
}
},
methods: {
increment: function() {
this.counter += 1;
this.$emit("increment");//自己点击时触发increment事件,父组件v-on:监听并执行此事件,incrementTotal事件
}
}
}; var App = new Vue({
el: "#root",
data: {
total: 0
},
components: {//定义的子组件赋予新模板标记
"button-counter": button
},
methods: {
incrementTotal: function() {
this.total += 1;
}
}
});
</script>

自定义一个简单的双向绑定

   <div id="root">
<input v-bind:value="something" v-on:input="something = $event.target.value">
<div>{{something}}</div>
</div>
//v-bind 绑定一个值,v-on检测触发值的变化
<script>
//定义局部子组件 var App = new Vue({
el: "#root",
data: {
something: ""
},
});
</script>

子组件与父组件的数据双向绑定

   <div id="root">
<custom-input v-model="something"></custom-input>
{{something}}
</div>
//v-bind 绑定一个值,v-on检测触发值的变化
<script>
//定义局部子组件
var custom = {
template: `<input type="text" v-bind:value="value" v-on:input="handleInput">`,
props: ["value"],//1.子组件接受一个value值就等于v-model绑定的值
methods: {
handleInput: function(e) {
this.$emit("input",e.target.value);
}
}
} var App = new Vue({
el: "#root",
data: {
something: "1212"
},
components: {
"custom-input": custom
}
});
</script>
   <div id="root">
<custom-input v-model="something"></custom-input>
{{something}}
</div>
//v-bind 绑定一个值,v-on检测触发值的变化
<script>
//定义局部子组件
var custon = {
template: `<input type="text" v-bind:check="value" v-on:input="handleInput"`>,
props: ["value"],//1.子组件接受一个value值就等于v-model绑定的值
methods: {
handleInput: function(e) {
this.$emit("input",e.target.value);
}
}
} var App = new Vue({
el: "#root",
data: {
something: ture
},
components: {
"custom-input": custom
}
});
</script>

Vue总结(三)的更多相关文章

  1. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

  2. Vue省市区三级联选择器V-Distpicker的使用

    Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...

  3. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

  4. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  5. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  6. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  8. 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)

    [Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809

  9. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  10. 总结Vue第三天:模块化和webpack模块化打包:

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...

随机推荐

  1. WIN7使用VisualSVN建立SVN服务器

    使用SVN开发十分的方便,这样就不用每次都拷贝粘贴来备份了,网上看到一篇给自己的windows电脑安装SVN服务器的使用非常方便. 1.下载安装文件(服务器端和客户端) 服务器端采用VisualSVN ...

  2. 一个比NPM更快更安全可靠的JavaScript包管理工具——Yarn

    yarn安装: npm intall -g yarn 查看安装是否成功: yarn -v yarn常用的命令以及和npm的对照如下: 更详细的请查看官方文档

  3. Go语言结构体转json的坑

    Go语言结构体转json的坑 标签(空格分隔): go json.Marshal() JSON输出的时候必须注意,只有导出的字段(首字母是大写)才会被输出,如果修改字段名,那么就会发现什么都不会输出, ...

  4. 16.boost图深度优先遍历DFS

    #include <iostream> #include <boost/config.hpp> //图(矩阵实现) #include <boost/graph/adjac ...

  5. POJ 1275 差分约束

    一堆化不等式,,,,,, 懒得写了... 请看mars_ch的blog-.. 戳戳戳戳戳 还是她给我找的错---. //By SiriusRen #include <queue> #inc ...

  6. VC6.0 设置动态链接库工程生成dll以及lib文件的位置

    在"Projet"->"Settings..."的"Link"选项卡中 "Output file name"中设置 ...

  7. (转)script标签到底该放在哪里

    一般script标签会被放在头部或尾部.头部就是<head>里面,尾部一般指<body>里[4-5]. 将script放在<head>里,浏览器解析HTML,发现s ...

  8. (转载) android项目大全,总有你所需的

    目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选      程序员8月书讯      项目管理+代码托管+文档协作,开发更流畅 [置顶] android项目大全,总有你所需的 标签: 源 ...

  9. String Comparison(C#)

    When comparing programmatic strings, you should always use StringComparison.Ordinal or StringCompari ...

  10. SpringBoot学习笔记(11)-----SpringBoot中使用rabbitmq,activemq消息队列和rest服务的调用

    1. activemq 首先引入依赖 pom.xml文件 <dependency> <groupId>org.springframework.boot</groupId& ...