安装
使用npm安装，全系统就会多一个vue命令。注意文件夹权限，否则报错
npm install -g @vue/cli
使用
在要创建的文件夹下，会在该文件夹下创建一个新文件夹vue_cli_test。选项：Vue2---npm（选yarn会报错，如果要改回来，则vi ~/.vuerc 将yarn改为npm）
vue create vue_cli_test
运行
cd vue_cli_test
npm run serve
默认端口号是8080，可能得改
停止
crtl+c
目录介绍
见ipad笔记 和vscode代码注释
开发注意事项
-
抽取组件，实现静态页面
注意：1.一个组件实现一个最小的功能 2.List拆成多个Item子组件
-
数据放在那个vue
1.比如List中每个item的数据，是写在List的容器，还是写在item，还是其他地方(放入app才能传值)
2.数据在哪个vc，方法就在哪个vc
-
v-model使用在标签绑定参数（绑定的参数是该标签的value） 双向绑定 但不要绑props传过来的值
-
胡子语法仅显示值
-
v-bind 简写为: ，一般用在props传值，或者在标签内部使用解析式如:key="todoObj.id"。或者用在:checked="todoList.length === doneTotal"
-
@、v-show等就是把click show等方法提取出来 起个名字在下面实现
-
watch操作 监视，只要监视的对象发生改变 则进行一次操作，在app中
-
胡子语法中的数据来源只能是：data、props、computed。没有props、computed，就必须在data中写
-
自定事件适用于 子组件→父组件 传值，在父组件给子组件绑定事件，然后在父组件中回调，子组件中触发（子传父（兄弟组件）用全局事件总线替代、父传子用props替代）
-
全局事件总线：A接受B的数据，则A给总线（
on）+写回调，B触发事件传数据。
-
父传子：直接props，任意组件间：全局事件总线
-
绑定事件两种写法
1.已经在methods中写了,直接this.deleteTod作为第二个参数
this.$bus.$on('deleteTod',this.deleteTod)
2.es6现场实现,使用箭头函数
this.$bus.$on('hello', (data)=>{
console.log("school收到了：", data)
})
- 一些trick
1.v-show(可直接根据里面表达式决定是否显示该组件)，则引号中是表达式，原生的如value，需要加:，则引号里面才是表达式！！！这是v-bind的原理
<input v-show="todo.isEdit" :value="todo.Title">
2.拿到input输入的值
1.方法中
xxx(接受的值,e,...)
data = e.target.value
2.使用v-model双向绑定 常用！！
<input type="text" placeholder="enter" v-model="searchName"/>
--------
data(){
return{
searchName:""
}
},
--------
methods:{
search(){
console.log(this.searchName)
}
}
图片.png
拿到标签给标签添加属性，需要给标签ref="hty",------.fouce()表示给他一个焦点，但是需要加一个nextTick外壳，保证刷新成功
nextTick：指dom跟新后再调用里面的。一般用在改变数据后要基于新DOM进行标签操作时使用
this.$refs.hty.fouce()
图片.png
- ajax请求
npm i axios
get
// 发送请求 http://localhost:5001/students
axios.get('http://localhost:5001/students').then(
// 成功
response => {
// response中的data才是需要的值
console.log("成功",response.data)
},
// 失败
error => {
// error.message里面是具体的原因
console.log("失败",error.message)
}
)
当get带参数时，使用ES6模板变量语法${this.searchName}。 ``。
search(){
// 发起请求https://api.github.com/search/users?q=xxx
// xxx需要是this.searchName 因此使用es6语法-模板字符串
// 特点 引号是`` 传参是${this.searchName}
axios.get(`https://api.github.com/search/users?q=${this.searchName}`).then(
// 成功
response => {
// response中的data才是需要的值
console.log("成功",response.data)
},
// 失败
error => {
// error.message里面是具体的原因
console.log("失败",error.message)
}
)
}
出现跨域错误CORS,最好在服务器解决，脚手架也给了解决方式。
- 引入第三方css文件，最好在html中引入，这里用相对路径写法
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
而不是在app.vue中import，import会有严格检查，css中的字体什么的没有就报错。
- 遍历时v-for时，必须要有key在,不在循环中，就得提出来 :key+表达式
<div class="card" v-for="user in users" :key="user.id">
<font color='red'>一个标准的v-for:属性值用动态绑定(:或v-bind),标签内容用胡子语法</font>
<div class="card" v-for="user in users" :key="user.login">
<a :href="user.html_url" target="_blank">
<img :src="user.avatar_url" style='width: 100px'/>
</a>
<p class="card-text">{{user.login}}</p>
</div>
路由
- 先装插件 注意是插件 用的时候先import然后use。必须制定版本为3，才能在vue2中用，现在默认版本是4了。
npm i vue-router@3
使用步骤
1.main.js中 这里配置一次即可
// 引入router插件
import VueRouter from "vue-router"
// 引入router文件
import router from "./router"
// 是一个插件 因此需要use
Vue.use(VueRouter)
// 新建一个router文件夹 使用了router的项目都有这个文件夹
// 创建实例
new Vue({
el:"#app",
render: h => h(App),
// 配置路由
router:router
2.router文件夹中的index.js中写路由，每次新路由都过来写
// 该文件用于创建路由器
import VueRouter from "vue-router"
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 需要暴露
export default new VueRouter({
// 写路由规则
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
3.a标签转<router-link> 另外 href变to active变active-class="active"
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
4.显示路由指定的组件放哪 像插槽
<router-view></router-view>
<font color='red'>路由小结：将组件分为路由组件和一般组件，路由组件无需注册，根据url的不同来显示，放在pages文件夹中。一般组件需引入注册，放在components文件夹中</font>
5.二级路由写法 不要加斜杠
// 需要暴露
export default new VueRouter({
// 写路由规则
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
// 二级路由注意 不要写/
children:[
{
path:'homenews',
component:HomeNews
},
{
path:'homemessage',
component:HomeMessage
},
]
},
]
})
6.二级路由跳转时 要带上一级路由(必须带上 不然有问题)
7.使用非a标签路由时时，比如button，无法使用router-link，需要使用this.$router.push
methods:{
// 点击按钮实现路由的方式
// 这里没有msg 需要在绑定click时，从ul标签内部拿到并传参过来
btnRoute(msg){
// 使用$router
this.$router.push({
path:'/home/homemessage/detail',
query:{
id:msg.id,
title:msg.title
}
})
}
8.路由切换页面后，输入框中的内容消失，需要保持在缓存中，使用keep-alive。其中include="HomeNews"需要缓存的组件名字。组件的name。不能在HomeNews.vue中包裹。
多个缓存页面，则 :include="['HomeNews','HomeMessage']"
<keep-alive include="HomeNews">
<router-view></router-view>
</keep-alive>
9.路由index.js文件中配置mode:"history"后url中就没有#了，但是在部署到nginx后需要由nginx判断是前端路由还是后端路由。
mode:'history',
10.打包成js css。当前工程内生成一个dist文件夹，里面就是需要部署的内容。
npm run build
Element UI 库
1.安装(也可以link引入 但是采用脚手架 建议npm i)
npm i element-ui
不用加s(官网加了)，本质是一个插件
2.按需引入（见官网）一般在部署前替换成按需
有坑,第一步：在babel.config.js中加入.presets中写@babel/preset-env而不是官网上的es2015
{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
网友评论