vue例子_vue案例qq-CSDN博客

本文链接：https://blog.csdn.net/qq_35911118/article/details/106968990

https://cn.vuejs.org/v2/api/#performance

data(){
return {
intervalId:null
}
},
methods:{
// 定时刷新数据函数
dataRefreh() {
// 计时器正在进行中，退出函数
if (this.intervalId != null) {
return;
}
// 计时器为空，操作
this.intervalId = setInterval(() => {
console.log(“刷新” + new Date());
this.initData(); //加载数据函数
}, 5000);
},
// 停止定时器
clear() {
clearInterval(this.intervalId); //清除计时器
this.intervalId = null; //设置为null
},
},
created(){
this.dataRefreh();
},
destroyed(){
// 在页面销毁后，清除计时器
this.clear();
}

//图片组件设置
var imgOptions = {
props: [‘data’],
render: function (createElement) {
return createElement(‘div’, [
createElement(‘p’, ‘图片组件’),
createElement(‘img’, {
attrs: {
src: this.data.url,
height: 300,
weight: 400

			}
		})
	]);
}

};

//视频组件设置
var videoOptions = {
props: [‘data’],
render: function (createElement) {
return createElement(‘div’, [
createElement(‘p’, ‘视频组件’),
createElement(‘video’, {
attrs: {
src: this.data.url,
controls: ‘controls’,
autoplay: ‘autoplay’
}
})
]);
}
};

//文本组件设置
var textOptions = {
props: [‘data’],
render: function (createElement) {
return createElement(‘div’, [
createElement(‘p’, ‘文本组件’),
createElement(‘p’, this.data.content)
]);
}
};

Vue.component(‘smart-component’, {
//设置为函数化组件
functional: true,
render: function (createElement, context) {
function get() {
var data = context.props.data;

		console.log("smart-component/type:" + data.type);
		//判断是哪一种类型的组件
		switch (data.type) {
			case 'img':
				return imgOptions;
			case 'video':
				return videoOptions;
			case 'text':
				return textOptions;
			default:
				console.log("data 类型不合法：" + data.type);
		}
	}

	return createElement(
		get(),
		{
			props: {
				data: context.props.data
			}
		},
		context.children
	)
},
props: {
	data: {
		type: Object,
		required: true
	}
}

})

	}
},
created: function () {
	//默认为图片组件
	this.change('img');
}

});

鼠标悬停几秒钟查看此处动态绑定的提示信息！

哈哈哈哈哈哈

var vm = new Vue({
el:’#app’,
data:{
msg:‘

这是一个大大的H1

’
}
})

现在你看到我了

{{key}}:{{value}}

id: name:

逆转消息

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 按钮的点击事件')
    }
}

})

<select v-model="opration">
    <option value ="+">+</option>
    <option value ="-">-</option>
    <option value ="*">*</option>
    <option value ="/">/</option>
</select>

<input type="text" v-model="n2" />

<input type="button" value="=" @click="sulotion"/>

<input type="text" v-model="result" />

这是一个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}}

//定义一个名称为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;
}

id: 姓名:

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：

<?xml version="1.0" encoding="UTF-8"?>

4.0.0

<groupId>com.itheima.vue</groupId>
<artifactId>vue</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>


<build>
    <plugins>
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <port>8080</port>
                <path>/</path>
            </configuration>
        </plugin>
    </plugins>
</build>

导入js:

2.2.2.2. 第二步：编写视图代码
demo1.html:

  <meta charset="utf-8" />

  <title>快速入门</title>

  <script src="js/vuejs-2.5.16.js"></script>

  <div id="app">

     {{message}}

  </div>

2.2.2.3. 第三步：启动tomcat
可以使用maven中的tomcat插件启动，也可以如下配置一个本地的tomcat:

2.2.2.4. 第四步：测试访问
启动本地tomcat:然后测试访问

2.3. 插值表达式
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对
象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。