vue基础

vue指令

v-bind

动态绑定:可以简写为冒号 ":" , 例如 :title

元素节点中 v-bind: title="msg" 和 vue对象data中 msg:222

ps: 无视 msg 的双引号, 其实就是同一个中间变量msg, 若是 title="msg.id" 也无视双引号,就是一个变量引用

//相当于找一个中间变量, title的值会随着 data中msg的值动态改变

将下面元素节点的 title 特性和 Vue 实例的 message 属性保持一致

<div id="app-2">
  <span v-bind:title="message">
    //鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-for

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

<li v-for="user in users"></li>  //users为vue对象data属性
//for循环获取的user,index属性能直接在DOM中使用,在vue对象方法中使用需要参数传入
<li v-for="(user,index) in users">
{{user.name}},{{index}}
</li>

v-if="msg" v-show="msg"

v-if , v-show有两个值:true 显示, false 隐藏.
v-model='msg'

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定;

能自动获取和设置value值, 和value值保持一致.

v-text v-html

v-txet='message' 绑定文本,显示在该标签中

v-html='message' 绑定标签内容能识别html标签
```
<p v-text="message"></p>
<p v-html="message"></p>
```

创建vue项目

创建一个项目: vue create vue-project(项目名)

启动该项目服务器: cd到这个项目文件夹里面: npm run serve

退出该项目服务器:ctrl+c

组件间传参

父组件中:

1.导入子组件: import ChildView1 from './components/ChildView.vue'

2.注册组件:

default {

components: { 
             ChildView1,      
            }
}

3.注册后可当标签使用:

<ChildView1></ChildView1> 渲染在template中

父组件传参给子组件

父组件传递给参数给子组件,通过给子组件添加属性:

子组件接收需用props:

props: [
        'name',
        'age'
]

子组件传参父组件

主动触发事件

$emit('recvMsg(自定义事件名)', '需要传的参数')

路由

1.安装路由:

进入到工程目录下: npm install vue-router

main.js中:

安装后导入路由 import VueRouter from 'vue-router'

使用路由 Vue.use(VueRouter)
导入组件

import BaseUseView from './components/BaseUseView.vue'

定义路由规则

var routes = [
{
    path: '/',
    redirect: '/baseuseview' //重定向,根目录时默认跳到下一个组件
}
{  
    path:'/baseuseview', //定义的路由路径名
    component: BaseUseView //子组件名
},
{
    path:'/optionview',
    component: OptionView
}
]

创建路由对象

var router = new VueRouter({
    routes,
    linkActiveClass:'active'  //可不写
})

挂载根实例

new Vue({
    render: h => h(App)
    router  //挂载根实例
}).$mount('#app')  //相当于单页面的挂载el

在父组件中:

调用组件

//router-link显示为一个a标签,to到路由地址

<router-link to='/baseuseview'> VUE基本使用</router-link>

//组件渲染的地方 ,显示子组件中的html内容

<router-view></router-view>

2.安装axios:(网络请求)

进入到工程目录下: npm install --save axios

1.导入axios插件: import Axios from 'axios'  在其他组件中无法使用axios命令,需将axios改为vue的原型属性

2.Vue.prototype.$ajax = Axios  (这里$ajax就是个随意属性名称,应为axios实现的就是ajax的功能)

好处:让vue实例可以使用$.ajax来调用Axios

 export default {
    data() {
        return {
            tech: null
        }
    },
    created() { //周期性函数,创建实例后自动调用
    // 钩⼦函数 mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去
之后调⽤该钩⼦
 // 获取数据
     this.$ajax.get('https://www.apiopen.top/journalismApi')
     .then(response => (this.tech = response.data.data.tech))
     .catch(err => console.log('错误提示:' + err))
    },
 }

ps 这里.then相当于ajax的access 请求成功后执行其后括号里函数; .catch相当于error 请求失败执行其后括号里的函数

vue基础

vue指令

v-bind

v-for

v-if="msg" v-show="msg"

v-model='msg'

v-text v-html