Java项目实训_2020/12/29

1.Vue.js的使用方式
	1.1、通过cdn方式进行引用
	<script src=https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js></script>
	1.2、官网下载https://cn.vuejs.org/引入项目
	1.3、利用vue脚手架vue-cli创建wue项目
2.介绍
是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。
vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
3.声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
<div id="app"> ff message }}</div>
var app = new Vue({
   
	el: '#app',
	data: {
   
	message: 'Hello Vue!'
	}
})
message1: '页面加载于'+ new Date().toLocaleString()
你看到的v-bind attribute被称为指令。指令带有前缀v-，以表示它们是 Vue提供的特殊attribute。

PS：body里面都是DOM
4.条件和循环
<div id="app-3">
<p v-if="seen">现在你看到我了</p></div>
var app3 = new Vue({
   
I
el: 'ttapp-3',
data: {
   
seen: true /false}
})
数据绑定到DOM文本或attribute，还可以绑定到DOM结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue插入/更新/移除元素时自动应用过渡效果

v-if 是条件渲染

for循环
5.处理用户的输入——翻转
<div id="app-5">
<p>{
   f message }}</p>
<button v-on:click="reverseMessage">反转消息</button> </div>var app5 = new Vue({
   
el: 't#app-5',
data: {
    message: 'Hello Vue.js! },
I
methods: {
   
reverseMessage: function () {
   
this.message = this.message.split("").reverse().join("")}
}})

双向输入<input v-model="message" />
6.生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程―—例如﹐需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如created钩子可以用来在一个实例被创建之后执行代码
new Vue({
   
data: {
    a: 1 ],
created: function () {
   
// 'this`指向vm实例console.log('a is: ' + this.a)}
})
7.插值
 <!-- 1 {
   {
   属性名}} -->
        <div>{
   {
   message}}</div>
        <!-- 2 v-html 进行插值 -->
        <div v-html="message"></div>
        <!-- 3 v-text 进行插值-->
        <div v-text="message"></div>
        <!-- 4 v-bind 通过数据绑定的方式进行插值-->
        <div v-bind:title="message">
            将光标悬浮几秒钟后将会看到
        </div>
8.指令
指令(Directives)是带有v-前缀的特殊attribute
指令的职责是，当表达式的值改变时，将其产生的连带影响响应式地作用于DOM。
回顾: <p v-if="seen">现在你看到我了</p>
这里，v-if指令将根据表达式seen 的值的真假来插入/移除<p>元素。

点击事件

属性绑定：v-bind 可用：表示
事件绑定：v-on 可用@ 表示
9.计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
10.绑定
对象语法
我们可以传给v-bind:class一个对象，以动态地切换class:<div v-bind:class="{ active: isActive }"></div>
传入多个class
<div class="static" v-bind:class="{ active: isActive, 'text-danger':hasError }" ></div>
数组语法
我们可以把一个数组传给v-bind:class，以应用一个class列表:
<div v-bind:class="[activeClass,errorClass]"></div>data: {
    activeClass: 'active', errorClass: 'text-danger' }
ps：样式
 .div1{
   width: 200px;height: 200px;background-color: cadetblue;border-radius: 30px;}
阴影：.div3{
   box-shadow: 10px 10px 10px #999999;}  
        /* 水平 竖直 阴影的扩散距离  */
 <div :style="{width:ww+ 'px',height: hh+'px',background-color: g}"></div>
类的绑定：类名在前表达式在后