Vue.js入门与组件通信-优快云博客

Vue是渐进式的JavaScript框架

前端框架和库（jQuery）的区别

功能上的不同

jquery库：包含DOM(操作DOM)+请求，就是一块功能。

art-template库：模板引擎渲染，高性能的渲染DOM    (我们后端的一种模板  跟python的模板类似)

框架：大而全的概念，简易的DOM体验+请求处理+模板引擎

在KFC的世界里，库就是一个小套餐，框架就是全家桶。

nodejs

去官网下载点我
打开终端cmd：执行 node -V 如果出现版本号代表node成功
使用npm　　
- 在cmd中找到自己要初始化化的项目路径

　　　　　　npm init --yes 会自动生成一个package.json文件

- 下载依赖包

　　　　　　npm install vue --save

　　　　　　npm install jquery --save

- 卸载包 npm uninstall vue -save
- 下载项目所有的依赖包 npm install

Vue的起步　　　　　　　　　　　　　　

引包
创建实例化对象

new Vue({
el:'#app',//目的地
data:{
    msg:"hello Vue"
}
});
/*
{{}}: 模板语法插值
    {{变量}}
    {{1+1}}
    {{'hello'}}
    {{函数的调用}}
    {{1==1?'真的':'假的'}}
*/

指令系统

//常用
v-text 
v-html 
v-if
v-show
v-for
v-bind
v-on

在vue中它可以简写: v-bind: 
:class 等价于 v-bind:class 
:src 等价于v-bind:src 
:id 等价于v-bind:id 
v-on:click 等价于 @click = '方法名'

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

//保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素
//index指的是数组中的下标的索引

父组件向子组件传递数据:通过Prop

1.在子组件自定义特性。props:['自定义的属性1','自定义属性2']
　　　　当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样  
2.要在父组件中导入的子组件内部 绑定自定义的属性 <Vheader :title = '父组件中data声明的数据属性'/>

例如：

父组件

<template>
　　<Vfooter :citysArray = 'citys '></Vfooter>
</template>
<script>

import Vfooter from './components/Vfooter'

export default {
　　name:'app',
　　data (){
　　return{
　　　　citys:[
　　　　　　"沙河","平西府","天通苑"
　　　　]
　　},

　　components:{

　　　　Vfooter,

　　}

　</script>

子组件

<template>
    <div>
        <ul v-for = '(item,index) in citysArray'>
            {{item}}
        </ul>
    </div>
</template>
<script>
    export default{
        name:'Vfooter',
        data(){
            return {

            }
        },
        methods:{

        },
        props:{
            citysArray:Array 
        }
    }
</script>

自定义方法

<template>
  <div class="app">
    <Vcontent @addZhuangHanler= 'addZhuang'></Vcontent>
  </div>
</template>

<script>
import Vcontent from './components/Vcontent'



  export default {
    name:'app',
    data (){
      return{
          
      }
    },
    methods:{
      addZhuang(str){
        this.citys.push(str)
      }
    },
    components:{
      Vcontent,
    }
  }
</script>
<style>
  
</style>

<template>
    <div>

        <button @click='addCunHandler'>
            添加一个村庄
        </button>
    </div>
</template>
<script>
    export default{
        name:'Vcontent',
        data(){
            return {

            }
        },
        methods:{
            addCunHandler(){
                this.$emit('addZhuangHanler',"我是新添加的内容")
            }
        }
    }
</script>