vue

最新推荐文章于 2024-10-21 08:09:54 发布

WhyteHighmore

最新推荐文章于 2024-10-21 08:09:54 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏：代码

本文链接：https://blog.youkuaiyun.com/weixin_45320238/article/details/103663239

代码专栏收录该内容

16 篇文章

订阅专栏

入门

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

模板

文本
v-html用于输出 html 代码
v-bind
v-if/v-else
v-else-if
v-show
v-model指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">	//html
  <p>{{ message }}</p>
</div>

<script>//JS
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
</script>

<div id="app">
        <div v-for="wo in ming">
            {{wo}}
        </div>
        <div v-if="ba">
            {{ba}}
        </div>
        <div>
            {{la}}
        </div>
        <input v-model="la">
        <input type="button" value="消失" @click="ba=false">
        <input type="button" value="翻转" v-on:click="reverseMessage">
        <script>
            var you = new Vue({
                el: '#app',
                data: {
                    ming: [123, 456, 789],
                    ba:true,
                    la:"woogw"
                },
                methods: {
                    reverseMessage: function () {
                        this.la = this.la.split('').reverse().join('')
                    }
                }
            })
        </script>

简介

类似于Angular、React

单页面框架
模块化组件化开发模式

数据驱动代码

创建项目：

node：单独运行vue

npm install -g cnpm --registry=https://registry.npm.taobao.org//淘宝镜像，加快下载速度
cnpm install cnpm -g//升级cnpm
cnpm install vue//安装vue
npm install webpack -g//安装项目模块化打包管理工具的包
npm install -g @vue/cli//安装vue-cli
vue create 项目名（选择默认）
进入项目后再
npm run serve//运行项目

//请求数据
cnpm install vue-resource --save//写入package.json中
cnpm install axios --save
cnpm install vue-router

cd ../
cd 文件夹

周期

beforeCreate

created

beforeMount

mounted

beforeUpdated

updated

beforeDestroy

destroyed

请求数据

vue-resource

import re from 'vue-resource';
var r=new re();

this.$http.get(api).then((response)=>{},function(err){})

axios
fetch-jsonp

调用组件

<v-header></v-header>//template

export default {//script
  components: {
    "v-header": Header, //挂载组件
  },
};

组件间传值

父组件向子组件传值

<v-Header :title="title" :run="run"></v-Header>//执行run方法

props:['title'],//接收数据

父组件主动获得子组件值

<v-Header :title="title" :run="run"></v-Header>//子组件

this.$refs.header.属性//父组件

子组件主动获取父组件方法

this.$parent.属性//直接获取

非父子关系传值

//VueEvent.js即js配置
import Vue from 'vue';
var event=new Vue();
export default event;

//A组件，把msg传给B
import VueEvent from '../model/VueEvent.js'
bus.$("id-Selected",this.msg)

//B组件,用data接收data=msg,mounted为类定义接收的方法
mounted(){bus.$on('id-Selected',function(data){})}

路由

vue-router可以动态的改变所挂载的组件

//同上安装
//1js配置
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//2创建组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
//import Foo from './Foo.vue'或者是
//3配置路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];
//4实例化路由：创建router实例，然后传routes配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
}),
//5挂载路由
const app = new Vue({
  router
}).$mount('#app')
//6根组件中放入
<router-view></router-view>

动态路由

path: '/bar/:aid', component: Bar
this.$route.params//获取动态路由的值

this.$route.query//用get获取动态路由的值

路由模块化

import './assets/css/basic.scss';  //在跟js中引入css
import router from '../router.js' 

export default router//在本文件中

编程式导航

//字符串
this.$router.push('home')

//对象
this.$router.push({ path: 'home' })

//命名的路由(在path: '/foo', component: Foo后加name:'user')
this.$router.push({ name: 'user', params: { userId: '123' }})

前端框架

Mint UI

移动手机端框架

npm install mint-ui -s

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

npm install babel-plugin-component -D

Element UI

PC端框架

Vuex

不同组件间数据共享、组件内数据持久化（用于大项目，小项目比较麻烦）（相似与Localstrage SessionStorage(小项目)）

npm install vuex -s

网址：vuex.vuejs.org

state存放数据
mutations改变state中数据
getters数据发生改变时会同时触发getters内的方法
action类似于mutation、但是异步的

循环

<p v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</p>//对象名object、属性位置index（0~i）、属性名key、属性值value
    
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

name : 菜鸟教程

url : http://www.runoob.com

slogan : 学的不仅是技术，更是梦想！

计算

el
data:存放数据
methods:只有相关依赖发生改变时才会重新取值({{ reversedMessage }})
computed（get/set）:在重新渲染的时候，函数总会重新调用执行{{ reversedMessage2() }}
mounted接收数据(组件模板渲染之后触发的生命周期函数)
components挂载组件名

监听

vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
//vm为对象名，counter为属性名，watch为监听方法

组件

<child message='hello'></child>

Vue.component('child', {//定义一个组件
  props: ['message'],//属性值
  template: '<span>{{ message }}</span>'//组件的内容
})

自定义指令

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
 
<script>
Vue.directive('focus', {// 注册一个全局自定义指令 v-focus
  inserted: function (el) {// 当绑定元素插入到 DOM 中。
    el.focus()// 聚焦元素
  }
})
new Vue({// 创建根实例
  el: '#app'
})

/*第二种形式*/
new Vue({
  el: '#app',
  directives: {
    focus: {// 注册一个局部的自定义指令 v-focus
      inserted: function (el) {// 指令的定义
        el.focus()// 聚焦元素
      }
    }
  }
})
</script>