vue()

目录

首先我们回顾一下之前学的东西

入门:

v-bind    绑定属性用法

​编辑

v-if 用法

v-for 

v-on 

v-model:双向绑定

组件:

全局组件:

局部组件:

vue生命周期:(这里让我研究研究)

vue项目:

访问:

3.7 单文件组件介绍和使用

单文件组件的特点

实例:

实例2\


首先我们回顾一下之前学的东西

 mybatis     ORM框架  把使用java面向对象思想,把数据库表记录及表之间的关系(一对一,一对多,多对一,多对多)和对象及对象(assiastion(一对一,多对一),collection(一对多,多对多))之间的关系做映射,达到操作对象,来操作数据库的目的。知识点:基础,动态sql,一二级缓存,插件原理(interceptor)

spring     

        核心 IOC 又叫DI     项目使用   把springmvc和mybatis使用IOC整合到一块   控制层(springmvc)->服务层->DAO层(mybatis )

       核心 AOP  面向切面编程   把对所有业务支持的通用模块/功能,从业务提取出来,单独做成的一个功能叫切面 ,然后使用AOP技术把切面整合业务中。例如常用的,事务处理,日志记录等等功能。减少代码重复量,降低代码之间耦合度,方便代码管理和维护。

  springmvc   

        前端控制器 DispatcherServlet-> 映射处理器handlerMapper->适配处理器 handlerAdaptor -> 处理器(自己写的controller)-> ModelAndView-> 视图解析器ViewResovler->视图渲染(把model域数据放入request)->返回给客户端

        知识点:统一异常处理 HandlerExceptionResolver

                     拦截器    Interception

                     定时任务    Task  ->  @Scheduled

                     Restful风格     get(R)   post(C)   put(U)   delete(D)   基于网络应用的程序,都必须遵循请求规则,才可以交互数据。   

        

          做项目前端使用    vue +elementui +axios 技术      ssm+shiro


入门:

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

官网:

vue2: Vue.js

vue3: ​​​​​​https://cn.vuejs.org/

命令:(这边建议自己把代码写写运行,更容易理解)

v-bind    绑定属性用法
  <title>vue示例</title>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
  <script src="./vue.js"></script>
 </head>
 <body>
    <div id="app-2" class="diva">
       <!-- <span v-bind:title="msg">-->
	   <!--v-bind可以使用: 做简化-->
	    <span :title="msg">
		     鼠标悬停一会儿观察效果
		</span>
	</div>
	 
	<script>
        var app =new Vue({
		  el:"#app-2",//绑定根元素
		  data:{
              msg:'页面111加载于:'+new Date().toLocaleString()
		  }
		})
	</script>

v-if 用法
 <body>
    <div id="app">
	     <!--使用v-if标签,来确定p元素是否在当前div是否存在-->
        <p v-if="isShow">是否可以看到我</p>
	</div>
	 
	<script>
        var app =new Vue({
		  el:"#app",//绑定根元素
		  data:{
              isShow:false
		  }
		})
	</script>
  
 </body>

我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构,是否显示p标签。

v-for 

v-for 指令可以绑定数组的数据来渲染一个项目列表

    <div id="app">
	     <ul>
		     <!--把gameList数组中的每一个对象赋给变量game-->
		     <li v-for="game in gameList">
			   {{game.gid}}-----{{game.gameName}}-----{{game.describe}}
			 </li>
		 </ul>
	</div>
	 
	<script>
        var app =new Vue({
		  el:"#app",//绑定根元素
		  data:{
               gameList:[ //定义一个对象数组
			   {gid:1001,gameName:'王者荣耀',describe:'有手上王者'},
			   {gid:1002,gameName:'英雄联盟',describe:'是王者都是大神'},
			   {gid:1003,gameName:'和平精英',describe:'每天晚上吃鸡一把才睡觉'}
			   ]
		  }
		})
	</script>

v-on 

 给元素绑定事件

      为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法

  <div id="app">
        <p>{{message}}</p>
    <!--使用v-on 给button绑定一个点击事件-->
		 <!--<button v-on:click='reverseMsg'>反转消息</button>-->
         <!--v-on的简化写法为 @ -->
		 <button @click='reverseMsg'>反转消息</button>
        </div>

        <script>
            var app=new Vue({
                el:"#app",//绑定根元素
                data:{//定义初始化数据
                    message:"我上楼复习"
                     //message:'上1海自来水来自海2上'
			  //message:'黄1山落叶叶落山2黄' 
                },
                methods:{//初始化或者给页面元素绑定的所有事件方法,都可以写到这里面
              reverseMsg:function(){
				  //alert(111);
				  //this 和java OOP中的this一样,都代表当前Vue类实例化出来的对象  使用this就可以获取到该对象的所有属性及方法
				  // .split('') 按照指定字符分割字符串 ['我','上','楼','复','习']
				  //reverse() 反转数组 ['习','复','楼','上','我']
				  //join('#')  '习#复#楼#上#我'
				   //join('')  '习复楼上我'
				  this.message = this.message.split('').reverse().join('')
			  }
		  }
            })
        </script>
    
    

v-model:双向绑定
  <div id="app">
	      <!--使用插值表达式,让message显示-->
	     <p>{{message}}</p>
		  <!--使用v-model绑定输入框的值-->
		 <input v-model='message'>
	</div>
	 
	<script>
        var app =new Vue({
		  el:"#app",//绑定根元素
		  data:{//定义初始化数据
              message:'我上楼复习' 
		  }
		})
	</script>

组件:

全局组件:

案例1、

 <div id="app">
	   <ol>
	         <!--组件使用-->
             <todo-item></todo-item> 
			 <todo-item></todo-item>
			 <todo-item></todo-item>
			 <todo-item></todo-item>
	   </ol>
	</div>
	 
	<script>
	     <!--演示用法,没有实际意义-->
	    Vue.component('todo-item',//组件名称
		{//组件内容
			template:'<li>做什么事。。。。</li>'// 组件模板
		}
		)

        var app =new Vue({
		  el:"#app",//绑定根元素
		   
		})
	</script>

案例2、

 <div id="app">
	     <ul>
		    <!--独立的,可以复用的-->
			<!--循环取出gameList每一个对象赋值给game-->
			<!--确定元素的唯一性  使用key属性来区别 v-bind:key='game.gid'-->
			<show-game-list v-for="game in gameList" v-bind:gm="game" v-bind:key='game.gid'>
			</show-game-list>
		     
		 </ul>
	</div>
	 
	<script>
	    //定义组件
		Vue.component('show-game-list',//组件名称
		 { //组件内容
			 props:['gm'],//定义属性变量,用于父作用域gameList中的每个元素传递到组件中
			 template:'<li>{{gm.gid}}-----{{gm.gameName}}-----{{gm.describe}}</li>'//模板内容
		 }
		)

		//实例化vue对象
        var app =new Vue({
		  el:"#app",//绑定根元素
		  data:{
               gameList:[ //定义一个对象数组
			   {gid:1001,gameName:'王者荣耀',describe:'有手上王者'},
			   {gid:1002,gameName:'英雄联盟',describe:'是王者都是大神'},
			   {gid:1003,gameName:'和平精英',describe:'每天晚上吃鸡一把才睡觉'}
			   ]
		  }
		})
	</script>

局部组件:


    <div id="app">
       <my-com :info="msg"></my-com>
    </div>
    
    <script src="./js/vue.min.js"></script>
    <script>
       //定义局部组件
       var MyComponent={
        props:["info"],
        template:`
            <h1>这是:{{info}}</h1>
        `
       } 

       var v = new Vue({
        el:"#app",
        data:{
            msg:"测试内容"
        },
        components:{
            "my-com":MyComponent
        }
       })

    </script>

vue生命周期:(这里让我研究研究)

new Vue  -> 创建前(before  create)->创建后(created)->挂载前(before mount)->挂在后(mounted)->更新前(before update)->更新后(updated)->销毁前(before distory)->销毁后(distoried)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        {{info}}
        <input type="button" value="测试" @click="xh()">
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var v= new Vue({
            el:"#app",
            data:{
                info:456
            },
            methods:{
                xh:function(){
                    //alert(123);
                    
                    this.$destroy();
                }
            },
            // template:"<h1>{{info}}</h1>",
            beforeCreate(){
                    console.log("beforeCreate============");
                    console.log(this.$el);
                    console.log(this.$data);
                },
                created(){
                    console.log("created============");
                    console.log(this.$el);
                    console.log(this.$data);
                },
                beforeMount(){
                    console.log("beforeMount============");
                    console.log(this.$el);
                    console.log(this.$data);
                },
                mounted(){
                    console.log("mounted============");
                    // console.log(this.$el);
                    // console.log(this.$data);
                    
                },
                beforeDestroy(){
                    this.info=999;
                    console.log("beforeDestroy============");
                    console.log(this.$el);
                    console.log(this.$data);
                    console.log(this.info);
                    

                },
                destroyed(){
                    // console.log("destroy============");
                    // console.log(this.$el);
                    // console.log(this.$data);
                }
        });    
        //  v.$mount("#app")

    </script>
</body>
</html>

vue项目:

安装:

这边可以看看我另一个安装vue的文章

vue安装和配置

vue.js

npm 

vue-cli

在你盘里创建一个新文件夹:

然后进入你创建的文件中,文件路径上写cmd

输入vue create xxxx(这里xxx是你要创建的新文件)

然后选择以下的  (空格是选上和取消)

运行:

访问:

 http://localhost:8080(这里是你运行后出现的ip)

vscode 启动失败   npm 命令找不到

3.7 单文件组件介绍和使用

单文件组件由来:

在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:

  1. 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  1. 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \
  1. 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
  1. 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了方法

单文件组件的定义

新建文件扩展名为.vue的文件,文件包含以下内容:

<template>

    <div class="cla"></div>

</template>

<script>

export default {

    props: {//注册属性 父传子 数据传递

    },

    data() {

        return {};//定义数据

    },

    created(){//created在模板渲染成html前调用,通常在这里初始化某些属性,然后再渲染视图

    },

    methods: {//方法事件处理

    },

    components: {//组件注册

    },

};

</script>

<style>

    .cla{

        color:red;

    }

</style>

单文件组件的特点

  1. 完整语法高亮
  1. 模块化处理
    • template中书写HTML结构
    • script中书写组件的配置项
    • style中书写组件的样式
  1. 组件作用域的 CSS  【scoped 表明这里写的css 样式只适用于该组件,可以限定样式的作用域】

单文件组件中script 标签理解

  1. 不使用.vue 单文件时,我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vue 项目

在.vue文件中,export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象

  1. 需要注意data 的书写方式不同,在 .vue 组件中data 必须是一个函数,它return返回一个对象,这个返回的对象的数据,供组件实现

实例:

<template>
    <div class="cla">
          <p>{{msg}}</p>
          <button @click="reverseMsg">反转消息</button>
          <br><br>
          <HelloWorld msg="hello world!"/>
    </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
    props: {//注册属性 父传子 数据传递
    },
    data() {
        return {
            msg:'hello qy141!!!'
        };//定义数据
    },
    created(){//created在模板渲染成html前调用,通常在这里初始化某些属性,然后再渲染视图
    },
    methods: {//方法事件处理
       reverseMsg:function(){
           this.msg = this.msg.split('').reverse().join('');
       }
    },
    components: {//组件注册
      HelloWorld
    },
};
</script>
<style>
    .cla{
        color:red;
    }
</style>

实例2\

----------------------------
src/components/MyDemo.vue
----------------------------
<template>
    <div>
        <h1>这是:{{ info }}</h1>
    </div>
</template>

<script>
export default {
    props:["info"]
}
</script>

------------------------
------------------------
src/views/MyPage.vue
-------------------------
<template>
    <div>
        <h1>我的页面</h1>
        <my-demo :info="msg"></my-demo>
    </div>
</template>

<script>
import MyDemo from '../components/MyDemo.vue'
export default {
    data(){
        return{
            msg:"一个消息"
        }
    },
    components:{
        "my-demo":MyDemo
    }
}
</script>
src/router/index.js
---------------------
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import MyPage from '../views/MyPage.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/mypage',
    name: 'MyPage',
    component:MyPage
  }
]

const router = new VueRouter({
  routes
})

export default router

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值