vue例子
https://cn.vuejs.org/v2/api/#performance
{{ msg }}
var vm = new Vue({
el:’#app’,
data:{
msg:‘
这是一个大大的H1
’}
})
现在你看到我了
{{key}}:{{value}}
{{ message }}
逆转消息var app5 = new Vue({
el: ‘#app-5’,
data: {
message: ‘Hello Vue.js!’
},
methods: {
reverseMessage: function () {
this.message = this.message.split(’’).reverse().join(’’)
}
}
})
//创建vue实例得到ViewModel
var vm = new Vue({
el:’#app’,
data:{
},
methods:{
divhandler:function(){
console.log('这是触发了inner div的点击事件')
},
btnhandler:function(){
console.log('这是触发了 btn 按钮的点击事件')
}
}
})
这是一个h1，测试vue中使用样式
table {
border-collapse: collapse;
color: black;
}
th{
color: white;
background-color: #42B983;
}
table,
tr,
td,
th {
border: 1px solid #FF0000;
}
| ID | username | password | date |
|---|---|---|---|
| {{ user.id }} | {{ user.username }} | {{ user.password }} | {{ user.date | dateFormate}} |
var vm = new Vue({
el: ‘#app’,
data: {
list: [{
id: 1,
username: ‘guqing’,
password: ‘12345’,
date: new Date()
}]
},
//在某一个vue对象内部定义的过滤器称为私有过滤器
//这种过滤器旨在当前vue对象el指定的监管的区域内游泳
filters: {
//input是自定义过滤器的默认参数,input的值永远都是取决于 | 左边的内容
dateFormate: function(input) {
console.log(input)
//过滤器的逻辑,将input的值格式化成yyyy-MM-dd字符输出
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDay();
input = year + ‘-’ + month + ‘-’ + day
return input;
}
}
})
//定义一个名称为dateFormate的全局过滤器,两个参数,一个参数为过滤器名称,第二个参数为逻辑代码
Vue.filter(‘dateFormate’,function(input) {
//将input的值格式化成yyyy-MM-dd字符输出
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDay();
input = year + ‘-’ + month + ‘-’ + day
return input;
})
var vm = new Vue({
el: ‘#app’,
data: {
list: [{
id: 1,
username: ‘guqing’,
password: ‘12345’,
date: new Date()
}]
}
})
#app-4{
width: 600px;
margin: 0 auto;
}
table {
width:100%;
border-collapse: collapse;
color: black;
margin-top: 15px;
}
th {
color: white;
background-color: dodgerblue;
}
table,
tr,
td,
th {
text-align: center;
border: 1px solid #FF0000;
}
var app4 = new Vue({
el: ‘#app-4’,
data: {
list: [{
id: 1,
name: ‘赵高’
},
{
id: 2,
name: ‘嬴政’
},
{
id: 3,
name: ‘李斯’
},
{
id: 4,
name: ‘荀子’
}
],
id: 0,
name: null
},
methods: {
add: function() { //添加方法
this.list.push({
id: this.id,
name: this.name
});
},
deleteEle: function(id) {
var index = this.list.findIndex(function(item) {
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id == id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
//删除
this.list.splice(index, 1);
}
}
})
Vue.config.keyCodes.f2 = 113;//f2自定义按键名称,113对应的键盘码
console.log(Vue.config.keyCodes)
Vue.js
-
vue.js研究
1.1. vue.js介绍
1.1.1. vue.js是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。
参考：https://cn.vuejs.org/v2/guide/
1.1.2. Vue.js与ECMAScript
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。
什么是ECMAScript?
ECMAScript（简称ES）是一种规范，规定了浏览器脚本语言的标准,我们平常所说的Js/Javascript是ECMAScript的实现，早期主要应用的ES3，当前主流浏览器都支持ES5、ES6等等，ES8已于2017年发布。
1.1.3. vue.js有哪些功能？
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中。
通过插值表达式：
条件与循环
dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。
双向数据绑定
Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。
处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
组件化应用构建
vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。
2. vue.js基础
2.1. MVVM模式
vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。
MVVM拆分解释为：
Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示.
MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。
Vue中的 MVVM：
从上图看出，VM(ViewModel)可以把view视图和Model模型（即业务逻辑）解耦合，VM要做的工作就是vue.js所承担的。
Jquery是视图和模型在一起，而 vue可以将视图渲染和模型分开。
2.2. 入门程序
2.2.1. 目标
完成vue.js的入门测试，知道vue.js的使用方式，了解MVVM模式，知道Model、View和ViewModel之间的关系。
本次测试我们在门户目录中创建一个html页面进行测试，完成使用vue来进行视图的渲染。
2.2.2. 实现
2.2.2.1. 第一步：创建工程
创建web工程
pom.xml：
4.0.0
com.itheima.vue
vue
1.0-SNAPSHOT
war
org.apache.tomcat.maven
tomcat7-maven-plugin
2.2
8080
/
导入js:
2.2.2.2. 第二步：编写视图代码
demo1.html:
快速入门
{{message}}
2.2.2.3. 第三步：启动tomcat
可以使用maven中的tomcat插件启动，也可以如下配置一个本地的tomcat:
2.2.2.4. 第四步：测试访问
启动本地tomcat:然后测试访问
2.3. 插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对
象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。