SSM学习记录7：通过cdn引入vue进行使用
通过cdn引入vue进行使用
引入vue 和 vue-router，注：vue的版本要比router版本低一个版本，例vue2配router3
<!-- import Vue before Element --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script><!-- import vue-router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
引入后下载↓
下载完老规矩添加项目库(不了解请见我前面的学习）
实例化↓：
<html>
<head><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import vue-router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><title>"测试"</title>
</head><body><div id="取个名字">主页
</div><script>
//实例化一个Vue
var newVue = new Vue({el:"取个名字",data:{shu1:"值1",shu2:"值2",shu3:"值3"},methods:{fa1(){},fa2(){}}
})
</script></body>
</html>
模块化：
将vue保存在js文件中，下面例子为studyVue.js↓：
export default {//采取default导出方式，在导入的js中可以任意取名，具体见下面内容data(){ //data以方法形式呈现，具体原因见官方文件return{shuxing1:"属性值1",shuxing2:"属性值2",shuxing3:"属性值3"}},methods:{fangfa1(){},fangfa2(){}},//有需要的话可以继续添加其他配置
}
在实例化中装载studyVue.js里的vue配置↓：
<html>
<head><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import vue-router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><title>"测试"</title>
</head><body><div id="取个名字">主页
</div><script type="module">//装载模块要设置type类型为module
import name from "/js/studyVue" //name为你想在本文件中使用的studyVue的别名，name可以为studyVue
//实例化一个Vue
var newVue = new Vue({el:"取个名字",data:name.data(), //装载studyVue.js里面导出的vue的数据data()，//只会得到data()方法中return{}里的值，例 shuxing1methods:name.methods //装载studyVue.js里面导出的vue的方法methods,导出的是所有方法
})
</script></body>
</html>
jsp中模块化会出现this不能指定到数据的情况，所以在下建议在js中将vue实例化导出再挂载↓
studyVue.js里的vue配置↓：
var studyVue = new Vue({data(){ //data以方法形式呈现，具体原因见官方文件return{shuxing1:"属性值1",shuxing2:"属性值2",shuxing3:"属性值3"}},methods:{fangfa1(){},fangfa2(){}},//有需要的话可以继续添加其他配置
})export {studyVue};
在页面挂载↓：
<html>
<head><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import vue-router --><script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script><title>"测试"</title>
</head><body><div id="取个名字">主页
</div>
<script type="module">import {studyVue} from "./js/study.js";studyVue.$mount("#取个名字");
</script></body>
</html>
配置的路由（router）的js文件：
Router.js↓
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
/*const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }*/// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [{ path: '/login.jsp', name:'login' }, //根据需要添加，可以没有，有的话可以在//后面调用中使用this.$router.push({name:'login'});这样的方式进行更改url{ path: '/main.jsp', name:'main' },
]// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({routes, // (缩写) 相当于 routes: routesmode:'history',
})
在对应页面导入并在的vue中使用↓
之后在需要时调用Vue router↓
this.$router.push({path:'/要跳转的路径'});//改变url
this.$router.go(0);//由于是cdn导入，没有Vue文件，url改变后不//会自动跳转，go(0)方法相当于刷新页面，//打开新的url
其实跳转页面使用js↓
window.self.location = "/要跳转的地址;"也是可以的
以上内容能给新学者解决容易被忽视的困惑，详细的知识请到官方文档中进行学习。