vue的一些基本知识

最新推荐文章于 2024-09-25 14:00:00 发布

weixin_30772105

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量63

点赞数

文章标签： javascript ui webpack ViewUI

原文链接：http://www.cnblogs.com/luoshida/p/10030368.html

版权

配置webpack及vue脚手架工具：

vue-cli 2
npm install webpack webpack-cli -g
npm install vue-cli -g
搭建脚手架 vue init webpack 项目文件夹名字
cd 项目文件夹名字
安装脚手架所需的npm包 npm install
在本地服务器运行该项目 npm run dev/npm start
打包上线 npm run build

vue-cli 3.0 ---需要nodejs>=8.9

　npm uninstall vue-cli -g

　npm/cnpm install -g @vue/cli 查看vue是不是>=3.0

　vue create 项目文件夹名字

　cd 项目文件夹名字

　运行本地 npm run serve

　打包上线 npm run build

转译html <span v-html="rawHtml"></span>

v-bind绑定那些后来需要更改的属性:

v-bind:class="{ active : isActive }" v-bind:style v-bind:id v-bind:href 缩写 :href
三元运算符不好使用这一种格式 :class = "{active : index == ins}" 或"{ active : isActive }"

绑定多个class用逗号隔开 { 'active' : isActive == ins, 'selected' : abc == ccc }

v-bind单项数据绑定 <input v-bind:value= "picked">

v-model双向数据绑定 <input v-model= "picked">同步更改data里面的picked值(只能运用在表单元素中) v-model相当于value的效果

利用ref获取dom <input type="text" ref="input1"/> this.$refs.input1.value 用ref代替获取dom的消耗,可以获取可以赋值

v-on 指令它用于监听 DOM 事件 v-on:click 缩写@click
对自身使用 @click.stop阻止冒泡 .prevent阻止默认行为
对影响到的父元素使用 .capture捕获(从影响到的节点上的事件从上往下触发) .self当点击自身时才触发
点击时绑定的dom元素 e.currentTarget 点击时直接点击的dom元素 e.target

v-if/v-show条件渲染

添加一个具有唯一值的 key 属性来表达“这两个元素是完全独立的，不要复用它们”
<input v-if="" placeholder="Enter your username" key="username-input">
<input v-else placeholder="Enter your email address" key="email-input">
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for循环 <li v-for="item in items" :key= "index"> {{item.text}} </li> <li v-for="(item,index) in items">{{item.text}}</li>

　　　　　　下面的元素的使用：显示字符串用 {{item.xxx}}　　显示src、class用 :src="item.xxx"　　显示value用 v-model="item.xxx"

vue对象的属性 data(){}数据 computed:{}实时计算data的某个属性 watched:{}当data的某个属性变化执行的函数 methods页面的函数

vue生命周期函数

　　beforeCreate

在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前调用，里面的this指向实例

　　created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置；数据观测（data observer),属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，还未与页面关联起来，$el属性目前不可见。可在这阶段进行一些初始化的操作（如ajax获取数据之类的）

　　beforeMount

在挂载之前没调用，解析模板，把实例对象下的$el属性指向设置中的el参数指定的元素，这个解析后的模板还没有和$el进行绑定

　　mounted

挂载之后调用，把解析后的模板与页面元素进行绑定，用解析后的模板内容替换页面

　　beforeUpdate

在数据绑定之前被调用

　　updated

在数据改变之后被调用，可以进行依赖于dom的操作（可以在这个阶段进行dom操作）

　　beforeDestroy（销毁前）,
　　destroyed（销毁后）

子模板solt的用法

单个slot内容

<el-main><slot></slot></el-main> 子模板加入slot就允许在子模板中插入想要的内容

父组件中直接在子模板的中间插入<Header><span>xxxx</span></Header> 内容就显示在slot中了

多个slot内容

<div> <slot name="h1"></slot>　<slot name="hh"></slot>　<slot></slot> </div> 子模板 slot上加name

父组件：<Header> <span slot="h1">标题一</span>　<span slot="h2">标题二</span>　<span>标题三</span> </Header>

组件之间的传值
父组件向子组件传值父组件页面部分引入子组件<Son :val="im value"></Son>
子组件的js部分

数组形式
export default{
data(){},
props:['val']}能直接在页面上用{{val}} 在js中使用this.val

对象形式
props: {
　　data1: {
　　　　type: String,
　　　　required: true,
　　　　default: 'default value',
　　　　validator (value) {
　　　　　　return (value.length < 5)
　　}},
　　data2: {
　　　　type: Array,
　　　　required: true,
　　　　default: () => ['', '', '']
　　}
}

子组件向父组件传值
子组件页面部分<input @change='setVal'></input> 方法部分setVal(){this.$emit('loadVal',this.val)}
父组件页面部分<Son @loadVal="getVal"></Son> 数据部分data(){return name:""} 方法部分getVal(val){this.name=val}
props的双向绑定 在data上新建属性用watch和props绑定然后watch监听数值的变化传给父组件

组件的跳转 <router-link to="/myRegister">注册</router-link>
函数内的跳转 router.go 已经被用来作为后退/前进导航，router.push 用来导向特殊页面。
跳转：this.$router.push({name: '组件的名字', params: {obj: paicheNo}}) 获取参数：this.$route.params.obj
跳转：this.$router.push({path: '/组件的地址', query: {obj: paicheNo}}) 获取参数：this.$route.query.obj

VueX

1: State

const store = new Vuex.Store({ state:{ products: [  {name: '鼠标', price: 20}, 　 {name: '键盘', price: 40}, 　 {name: '耳机', price: 60}, 　{name: '显示屏', price: 80}  ] } })

export default { data () { return { products : this.$store.state.products //获取store中state的数据  } } }

2: Getters

getters:{ //添加getters
    saleProducts: (state) => { 　　 let saleProducts = state.products.map( product => { 　　　　return { 　　　　　 name: product.name, 　　　 　　price: product.price / 2 　　　　 } 　　}) 　　return saleProducts; 　 } }

export default { data () { return { products : this.$store.getters.saleProducts  } } }

3: Mutations

const store = new Vuex.Store({ mutations:{ //添加mutations  　　minusPrice (state, payload ) { 　　　　let newPrice = state.products.forEach( product => { 　　　　 product.price -= payload 　　　　}) 　　 } } })

export default { data () { return { products: this.$store.state.products } }, methods: { minusPrice() { this.$store.commit('minusPrice', 2); //提交`minusPrice,payload为2不接受异步  } } }

4: Actions

const store = new Vuex.Store({ actions:{ //添加actions minusPriceAsync( context, payload ) { 　　setTimeout( () => { 　　context.commit( 'minusPrice', payload ); //context提交 　 }, 2000) 　 } } })

export default { data () { return { products: this.$store.state.products } }, methods: { minusPriceAsync() { this.$store.dispatch('minusPriceAsync', 5); //分发actions中的minusPriceAsync这个异步函数  } } }

5: Modules

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ 　　modules: { 　　　　a: moduleA, 　　　　b: moduleB 　　 } })