Vue初级基础知识

vue包括三部分 视图 逻辑 样式
1、模版语法 插值 {{}}
ps：{{注意：只能存在单行语句，并且不能作用在HTML属性}} {{“哈哈”}} {{1+2}}

2、指令
v-html (能解析里面的标签)
v-text
v-bind 简写(? 绑定动态数据

<span v-bind:title=''ts''>hhhh</span>
<script>
export default{
name:'Hello'
data(){
return{
ha：‘color1’；
ts：‘我是提示’
              }        
               }
                        }
</script>

条件渲染
v-if 只有为真才会渲染，如果为假，则连标签都不存在
v-else
v-show 无论真假 直接渲染 为假时相当于 display：none
3、列表渲染

<div class="list">
<li v-on:click="getInfo(item)"  v-for="(item,index) in user" :key="index">{{item]}</li>
</div>

4、事件监听

v-on 缩写 (@)
methods

<button v-on:click="num+=1"> 按钮</button>
<button v-on:click="handClick"> 按钮</button>
<p>{{num}}</p>

(与data()同级)methods:{
 handClick(){
 alert("我是事件")
// ps:
this指向当前组件
(this来索引当前data中的数据)
 this.show=! this.show
 }
}

<li v-on:click.stop="getInfo(index)"  v-for="(item,index) in user" :key="index">{{item]}</li>
methods:{
getInfo(n){
console.log(this.name[data])}
}

事件参数 event $event
修饰符

• stop 阻止事件冒泡
• prevent 阻止默认事件
• once 生效一次
  监听键盘事件

<input type="text" v-on:keyup.enter="getkeyInfo "> 表示按回车时触发

getkeyInfo(event){

}

显示过滤/排序结果：filter
5、计算属性 computed
调用 {{名字}}
计算属性computed和methods区别
计算属性是基于它们的响应式依赖进行缓存的，methods会多次被调用执行
6、表单输入绑定
v-modle 双向数据绑定
watch 时时刻刻监听获取每次输入在内容

<input type="text"  v-model="msg">
<p>{{msg}}</p>


data(){
return{
msg:hello
}
}
watch；｛
msg:function(data){
console.log(data)
}

｝

修饰符 lazy 失去焦点的时候获取 v-model.lazy=“msg”
number 、trim
7、绑定class
v-bind:class="{active:isActive}"
data(){
return{
isActive:true
}
}
8、子父级组件交互通信
父——>子: props

父里面写  :title="msg" :num="num" 
data里面定义 msg:"我是数据",num:10

子里面写: {{title}} 
props{
num:{
type:Number,
default:5
}
} 
数据类型限定（验证）
必选项、默认值 

子——> 父:emit Event

子里面
<button @click="sendMsg">按钮传递</button>
data  msg:'我是子组件数据'
props{
num:{
type:Number,
default:5
}
}
computed:{
addnum(){
return this,num*5
}
}
methods:{
sendMsg(event){
//两个参数key, value
this.$emit("sendmsg",this.msg )
                                   this.addnum
}
}

父里面 
当做自定义函数调用
input type="text" v-model="num"
<Child @sendmsg="getMsg" :num=''num'' />
                                                           getNum
{{info}}
data 里面info:'' "
medthods:{
getMsg(data){
this.info=data
}

}
ps 输入框中数字都是字符串类型 需要转化
computed:{
getNum(){
return this.num-0;
}
}

9、动画
transition
过渡类名
Animate.css
enter-active-class=“animated tada”
leave-active-class=“animated bounceOutRight”

10、局部自定义指令
vue实例对象中有生命周期
当页面加载时出发该元素将获得焦点

directives:{
focus:{
inserted:function(el){
el.focus()
}
}
mycss:{
inserted:function(el){
el.style.color=“red”;
}
}
}
11、过滤器

{{price | moneyChange}}
{{info | contextData }}

data 里面price:20,
             info:"我是一个文本信息"

filters:{
moneyChange（value）{
if(typeof value==="number"){
return "￥"+value
}
return value;
},
contextData(value){
return value+"——来自黑人"
+new Date()

}
}

12、 axios
get
组件被创建时候执行
main.js
引入import Axios from “axios”
挂载到原型对象上
Vue.prototype.$axios=Axios
单页面组件里
created(){
挂载了原型对象直接调用

<li v-for="info in newsData" > {{info.title}}
初始化nesData:[ ]
this.$axios("http://www.wwtliu。。。。.php",{
 params: {
 type:"junshi"
      ID: 12345
    }
})
.then(res=>{ 
this.newsData=res.data
console.log(res.data)})
.catch(error =>{console.log(error)})
}

post
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

PS: 注意： axios接受的post请求参数的格式是form-data格式
引入第三方库qs
this.$axios.post(“http://www.wwtliu。。。。.php”,qs.stringify({
firstName: ‘Fred’,
lastName: ‘Flintstone’}）
)
axios 全局的axios默认值
axios.defaults.baseURL = ‘https://api.example.com’;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
拦截器
main.js
引入qs

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
  if(config.meghod=="post"){
  config.data=qs.stringify(config.data)
}
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

路由
动态背景图片

  <div class="bannerHover" :style="{backgroundImage:`url(${back})`}">
  data
      back:require("../../assets/images/comHeader/bg1.jpg")
  
    methods: {
      getUrl(){
        let path = this.$route.path;
        console.log(path);
        switch (path) {
          case '/companyProfile':
          case '/companyCulture':
          case '/managementTeam':
          case '/organizationChart':
          case '/enterpriseQualification':
          case '/team style':
            this.back=require("../../assets/images/comHeader/bg1.jpg");
            break;
          case '/businessArea':
          case '/projectResult':
          case '/solution':
            this.back=require("../../assets/images/comHeader/bg2.jpg");
            break;
          case '/employ':
            this.back=require("../../assets/images/comHeader/bg7.jpg");
            break;
        }
      }
    },
     created(){
    this.getUrl();
    },
    watch:{
      '$route':'getUrl'
    }