码迷,mamicode.com
首页 > 其他好文 > 详细

vue

时间:2018-06-28 17:36:29      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:min   isp   users   none   img   scope   default   display   assets   

v-for循环  后面强烈建议加一个    :key:“index / id......”

一使用vue-cli生成项目步骤:
  1、安装nodejs
  node -v
  npm -v
  2、Vue CLI需要Node.js 8或更高版本(建议8.10.0以上)
  执行如下:npm install -g @vue/cli

  看到了:@vue/cli@3.0.0-rc.3表示安装成功了
  或者是:C:\Users\Administrator>vue -V
  3.0.0-rc.3
  3、vue create hello-world生成新项目

  一定要连网,等待它下载完成

  4.$ cd hello-world
     $ npm run serve

  npm run dev
  npm start

二  、组件

技术分享图片
一个组件的命名首字母必须是大写
        一个组件中的data必须是一个函数
                data(){
                    return {
                      
                    }
                }
        静态资源模块导入方法:
        如果想在assets中引用mp3,不能直接写地址(audio src=“地址”),需要
            import audio1 from "./assets/1.mp3"
            然后在data中 return{
                    audioSrc=audio1
                }
            才能用
创建组件,静态资源导入
技术分享图片
在主页中:
import Vheader from “./components/Vheader.vue”
export default中(和data同级):
components:{
            Vheader:Vheader
        }

这样就可以在标签中用:
<div id="app">
        <Vheader></Vheader>
</div>
组件嵌套

组件的style标签中需要加scoped,表示用自己的样式,避免混乱

三、父组件想子组件传值

  1.在子组件的props(data同目录)进行验证(验证的是    自定义的属性:数据类型)
  2.给父组件的子组件标签设置自定义的属性

四、子级往父级传值

 

vue

标签:min   isp   users   none   img   scope   default   display   assets   

原文地址:https://www.cnblogs.com/pygg/p/9239670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!