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 属性保持一致

    
   
          //鼠标悬停几秒钟查看此处动态绑定的提示信息！    
    

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

2. v-for

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

 //users为vue对象data属性 //for循环获取的user,index属性能直接在DOM中使用,在vue对象方法中使用需要参数传入 
 { { user.name}},{ { index}} 

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标签

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