Vue.js实战笔记

[lemooljiang]

Vue.js的实战技能，以需求为导向，兼顾各个知识点。
-> 前往星空笔记

Comments

[lemooljiang]

主站
Vue Cli
vue api
Vue详细手记
BootstrapVue
mpvue（小程序）
项目布署 |
网站图标svg

[lemooljiang]

node v12.13.0 / npm 6.12.0 / cnpm@6.1.0 / @vue/cli 4.1.1

"dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.1.0",
    "core-js": "^3.4.3",
    "dsteem": "^0.11.3",
    "ipfs-http-client": "^40.1.0",
    "mavon-editor": "^2.7.7",
    "steem": "^0.7.10",
    "vue": "^2.6.10",
    "vue-cookies": "^1.6.1",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },

[lemooljiang]

[lemooljiang]

Vue Cli

1.使用cnpm, 注册为国内的镜像，使用cnpm代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org  

2.cnpm install -g @vue/cli
vue --version

3.创建一个新项目
vue create hello-world

//babel router vuex 选择这三项就可以了
//sass可以不选填，它是css语法的拓展
//eslink 是检查语法的，可以不用

4. 运行
cnpm run serve

5. 打包
cnpm run build

[lemooljiang]

nrm 是一个npm源管理器，允许你快速地在如下npm源间切换：
npm install nrm -g
nrm ls
nrm use taobao  //切换不同的镜像源
npm install cnpm -g   //安装cnpm工具

[lemooljiang]

//text.js
export default {
  name: 'tiantian',
  age: 28
}
export let title = 'every'

//main.js
import tt from './text.js'
import {title} from './text.js'

console.log(tt)   //tt.name  tt.age

[lemooljiang]

[lemooljiang]

1. 数组
  <h1 :class="['first', 'second']">hello</h1>
2. 三元表达式  
  <h1 :class="['first', 'second',flag?'active':'']">
3. 类名
  <h1 :class="['first', 'second', { 'active':flag }]">
4. 直接使用类
 <h1 :class="{first:true, second:true}"}>hello</h1>

[lemooljiang]

.stop @click.stop='show'  //可以阻止事件冒泡
.prevent  //阻止默认行为
.capture  //捕获触发事件
.self     //只有点击当前元素才触发
.once    //只触发一次

[lemooljiang]

@keyup.enter='function'
.enter  //监听enter键
.tab

[lemooljiang]

手册
参考

cnpm install bootstrap-vue bootstrap --save

//src/main.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

[lemooljiang]

[lemooljiang]

<template>
  <div id="app">
    <router-link to="/index">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/manage">管理</router-link>
    
    <div v-if="$store.state.token">
      <a>{{$store.state.username}}</a>
      <a @click="logout">注销</a>
    </div>
    <div v-else >
      <router-link to="/register">注册</router-link>
      <router-link to="/login">登录</router-link>
    </div>
    <router-view/>
  </div>
</template>

[lemooljiang]

直接在子组件中使用 this.$parent 即可获取父组件对象。

这种方法比较简单，但是不太直观，建议使用上一种方法。

[lemooljiang]

主要是通过 $refs 获取子组件对象

1. 绑定属性
2. 获取子组件对象

//Test.vue
data(){
 return {
   str:'',
   sonmsg: '这是子数据'
 }
},

// App.vue
<Test ref="sonmsg"></Test>  // 1. 绑定属性
mounted() {
 console.log(566, this.$refs.sonmsg.sonmsg) // 2. 获取子组件对象
}

[lemooljiang]

//app.vue
<style>
    //用这个类
    .router-link-exact-active{
    color:red;
    border-bottom: 1px solid red;
    }

    .router-link-active{
        color:red;
    }
</style>

[lemooljiang]

<button @click='jumpto'> 点击跳转 </button>
<script>
methods: {
  jumpto (){ 
    this.$router.push('/cart')
    //this.$router.push({path: '/cart'}) 
    //this.$router.push({path: '/cart' + id}) 
  }
}
</script>

[lemooljiang]

常见的文本格式化，只能用在插值表达式和v-bind表达式中。实质是对数据进行处理，执行了函数。

<li>{{ post.created | formatTime }}</li>

filters:{
  formatTime(data){
    return data.substring(0,10)
  }
},

[lemooljiang]

对于常用的重复使用的代码，可以把它写成公共方法，然后在全局使用即可。

主要有两步:
1.utils -> 定义方法或变量，export
2.main.js中导入并挂载到全局。

//utils/getstr.js
const getstr = function(){
  function randomString(length, chars) {
    let result = ''
    for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
    return result
  }
  return randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')
}
export {getstr}

//main.js
import {getstr} from "./utils/getstr"
Vue.prototype.getstr = getstr

全局即可使用：this.getstr

[lemooljiang]

这也是调用子组件的方法

<input type="button" value="调用" @click="getElement">
<h3 ref="myh3">天天这样</h3>

getElement: function () {
    console.log(this.$refs.myh3.innerText)
}

//如果是循环中使用$refs（v-for）,那么它的元素会是一个数组！
<div v-for="">
<mavon-editor v-model="body" ref="mds" @imgAdd="upimg" style="height: 100%"/>
<div>

//mds: Array(3)
0: VueComponent {_uid: 91, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
1: VueComponent {_uid: 102, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
2: VueComponent {_uid: 113, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
length: 3

[lemooljiang]

// 一个案例：文章列表到文章详情页
//注意：+ 号之间不能有空格！！它是绑定变量的，有空格的话会被加入
<router-link :to="'/article/'+post.permlink">{{ post.title }}</router-link>
//router.js
path: '/article/:permlink'
//article.vue 取值方法
let permlink = this.$route.params.permlink

// this.$route 和 this.$router 的区别
this.$route是路由参数对象，params,query都属于它
this.$router是路由导航对象，可以实现路由的跳转

[lemooljiang]

<div id="app">
    <router-link :to="{name: 'login'}">login</router-link>
    <router-link :to="{name: 'login',params:{id:10}}">login</router-link>
    //传参的形式
    <router-view></router-view> 
</div>

[lemooljiang]

参考
参考2

可以动态更新data中的数据显示，也就是操作data的方法

data() {
  return {
    post: {id:1, body:'hello'},
  }
},
methods:{
  addCollection() {
    this.$set(this.post, 'id', 3)  //更改id值
    this.$set(this.post, "body", "world") 
    this.$set(this.post, "child", [])  //增加一个child属性
  },

[lemooljiang]

它会自动判断是不是手机端，如果是，则使用以下样式！

@media only screen and (max-width:768px) {
  #moochain{
      width: 96%;
      margin: 0 auto;
  }
  .classlist{
      padding-left: 0.5rem;
      width: 98%;
      margin: 0 auto;
  }
}

[lemooljiang]

刷新页面的问题

//router.js
const router = new VueRouter({
  mode: 'hash',
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

历史模式(history)的路径比较好看，比如：https://steemjiang.com/hotarticle/6725b
但是，会碰到刷新就404的错误！这个可以在nginx的配置中设置：
location / {
        root   /home/dist-steemjiang;       
        index  index.html index.htm;        
     if (!-e $request_filename) {   #history模式的设置   
         rewrite ^/(.*) /index.html last;
          break;
        }
    }

哈希模式(hash), 路径中有'#',比如：https://starnote.github.io/#/starnote/7s4b6 
它无需任何额外的配置，所以，在github中可以直接使用！