vue基础

vue指令

1. 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()
  }
})

2. 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>

3. v-if="msg" v-show="msg"

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

4. v-model='msg'

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

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

5. 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中

父组件传参给子组件

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

<ChildView1 :name='name' :age='age'></ChildView1>

子组件接收需用props:

props: [
        'name',
        'age'
]

 

子组件传参父组件

<ChildView1 @recvMsg='btnClick'></ChildView1>

主动触发事件

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

 

路由

1.安装路由:

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

main.js中:

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

   使用路由 Vue.use(VueRouter)

2. 导入组件

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

3. 定义路由规则

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

4. 创建路由对象

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

5. 挂载根实例

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

在父组件中:

6. 调用组件

   //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 请求失败执行其后括号里的函数