Vue入门

Vue是一个构造器/构造函数

//对象叫选项对象
let vm = new Vue({
    // 挂载对象
    el:"#app",
    // 数据
    data:{
        message:"世界你好!"
    }
})

// 在Angula中叫表达式
{{message}}  插值
// {{message + ""}} // 表达式

指令
    v-html="message" 可以解析html字符串
    v-text="message" 不可以解析html字符串

Vue地址叫内容分发网络
    CDN智能虚拟网络
    优点：提升网站访问速度
    
    
v-module="message" 绑定输入框的值
v-onclick="" 点击 === @click=''



1)   传参

    v-on:click="submit($event)" 
    
    v-on:click.prevent="submit"
    prevent修饰符可链式
    
2)生命周期函数

beforecreate(){
    //挂载元素 实例属性 实例方法 都没有生成
}
created(){
    // 挂载元素  还没有被初始化
    // 实例属性 实例方法 编译出来
}

beforeMount(){
    // 挂载元素 初始化了，但是模板没有被编译、原样输出
    // 实例属性 实例方法 编译出来
}
mounted(){
     // 挂载元素 初始化了，模板被编译
    // 实例属性 初始化了
    // 实例方法 初始化了
}

// 全局

beforeUpdate(){
    // 改变的触发
    // 数据更新之前
}

updata(){
    // 数据改变
    // 数据更新之后
}

v-for

 

<!-- <li v-for="item  in '你好'" :key="item">
        {{item}}
    </li> -->
    
    <!-- <li v-for="(item,index)  in [1,2,3,4]" :key='index'>
        {{item}}
        {{index}}
    </li> -->
    
    <li v-for="(val,key)  in {'name':'zs'}" :key="val">
        {{val}}
        {{key}}
    </li>
    
</ol>

计算属性

// 运算或者拼接不需要事件触发

点击@click="computer"
data(){
    return {
    
        val1:null,
        val2:null,
        val3:null,
        str:'大家好'
    }
},
computed:{
  slogan(){
    return this.str + 666;  
  },
  sum(){
  
      return Number(this.val1)+Number(this.val2)
  }
},
watch:{
  // 监听
  slogan(nVal,oVal){
    console.log(nVal)
    console.log(oVal)
  }
},
methods:{
    computer(){
        this.val3 = Number(this.val1)+Number(this.val2)
    }
}

v-bind //绑定样式

<h1 v-bind:style="{font-size:'12px'}">绑定样式</h1>

<h1 v-bind:style="[styleObj,styleObj2]">绑定样式</h1>

data(){
    return {
        styleObj:{
            color:'red'
        },
        styleObj2:{
            background:blue
        }
    }
}



v-bind:class="{'text-red':true}"

<style>
    .text-red{
        color:red;
    }
</style>

vue 脚本架

1.  npm i —g vue-cli
2.  vue init webpack 包名

添加前缀

postcss-loader

sass-loader

autoprefixer


rules:[{
    loader:'post-loader',
    options:{
        sourceMap:true,
        config:{
            
        }
    }
}]