【vue】vue基础知识

<!--template展示给用户，相当于MVVM模式中的V-->
<template>
  <div class="first_div">
    //插值表达式
    <p>{{ message }}</p>
    //这里的参数是从父组件的template里传过来的
    <p>{{data_1}}</p>
    //v-开头的是vue中的指令，使用v-bind来绑定属性（单向绑定，只能将model中的数据传给绑定的属性）
  ），可以动态改变属性值
    <span v-bind:title="dream">学好vue不是梦！</span>
  </div>
</template>
<!--<script>模块是m和vm结合的地方-->
<script>
export default {
  name: "greeting.vue",
  //函数
  data() {
      //return返回的是一个对象，可以是后端返回的数据
    return {
      message:"这是一个插值表达式的值",
      dream:"小目标"//把这个绑定为标签属性值用到v-bind:
    }
  },
  props:{
    data_1:String
  }
}
</script>
<!--设置元素样式的模块-->
<style scoped>
.first_div p{
  color: red;
}
</style>

<div id="app">
      <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      url: 'http://www.runoob.com'
    }
})
</script>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!--    v-if 指令将根据表达式 ifgao 的值(true 或 false )来决定是否插入 p 元素,会对DOM的新建和删除操作，增加前端开销 -->
    <p v-if="ifgao">我是最帅的人～！！</p>
<!--    v-show 每次不会重新删除或者创建，只是改变了元素的可见属性display:none，一般会使用v-show而不是v-if-->
    <p v-show="ifgao">我是最帅的人～！！</p>
<!--  v-if\v-else-if\v-else的用法-->
    <p v-if="age>=70">{{username}},老人家你该休息了～</p>
    <p v-else-if="age>=18">{{username}},欢迎光临，请开始吃鸡！～</p>
    <p v-else>{{username}},小朋友，你的作业写完了吗！～</p>
data() {
  return {
    message: "这是一个插值表达式的值",
    dream: "小目标",
    ifgao:true,
    username:"帅哥",
    age:16
  }

<a v-on:click="doSomething">

<template>
  <div class="first_div">
<!--    v-on:可以缩写成@-->
    <p v-on:click="username='大佬们'">{{username}},我是v-on~</p>
    <p @click="username='大佬们menmen'">{{username}},我是v-on~的缩写@</p>
    <p v-on:click="changeusername">{{username}},我是v-on的函数变量~</p>
  </div>
</template>
<script>
export default {
  name: "greeting.vue",
  data() {
    return {
      message: "这是一个插值表达式的值",
      dream: "小目标",
      ifgao:true,
      username:"帅哥",
      age:16
    }
  },
  props:{
    data_1:String
  },
  methods:{
    changeusername:function (){
      this.username="dalao"
    }
  }，
  created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
    },
   mounted() {
    console.log("vue实例挂载到dom之后")
    }
}
</script>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

<table>
<tr>
  <th v-for="(header_name,key) in project_header" v-bind:key="key">{{ header_name }}</th>
</tr>
<tr v-for="(item,key) in projects" v-bind:key="key">
  <td>{{ item.name }}</td>
  <td>{{ item.leader }}</td>
  <td>{{ item.app_name }}</td>
</tr>
</table>
</template>
<script>
export default {
  name: "projectlist",
  data(){
    return{
      project_header:["项目名称","负责人","应用名称"],
      projects:[
        {name:"吊炸天的项目",leader:"飞天小子",app_name:"很牛逼的应用"},
        {name:"非常厉害的项目",leader:"小旋风",app_name:"很神秘的应用"},
        {name:"很完美的项目",leader:"阿童木",app_name:"666的应用"}
      ]
    }
  }
}
</script>

import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);//这样就不用在父组件内导入(import)和声明（components)子组件了
然后在App.vue根组件中调用就可以了，（不需要再去导入和声明了）
<login-New></login-New>

<!--父组件loginnew.vue->>
<hello-world></hello-world>
<hello-world>这是个hello-world插槽位</hello-world>
<!--如果想要渲染出父组件中调用子组件标签中的内容，就要在子组件中添加插槽-->
<!--子组件hello-world.vue文件-->
<!--如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容-->
<slot><p>hello-world：我们一起学猫叫</p></slot>

<div>
   <hello-world>
     <!--    方法二  命名插槽-->
    <!--    在vue2.6之前版本-->
    <p slot="part1">一起喵喵喵</p>
    <!--    在vue2.6之后版本-->
    <template v-slot:part2>
      <p>在你面前撒个娇</p>
    </template>
    <!--       v-slot:可以简写成"#" -->
    <template #part3>
      <p>还是喵喵喵喵</p>
    </template>
    <!--        插槽作用域:父组件调取子组件的插槽内部要获取子组件的属性-->
    <!--        2.6 之前-->
    <p slot="part4" slot-scope="scope">
      {{ scope.user }}我得心脏砰砰跳
    </p>
    <template slot="part5" slot-scope="scope">
      <p>{{ scope.user }}我得心脏砰砰跳aaaaaa</p>
    </template>
    <!--        2.6 之后-->
    <template v-slot:part6="scope">
      <p>{{scope.user}}都是你的味道</p>
    </template>
    <template v-slot:part7="{user}">
      <p>{{user}}都是你的味道</p>
    </template>
  </hello-world>
</div>

<!--    第一种方式-->
<!--    <slot></slot>-->
    <!--    第二种方式-->
    <slot><p>我们一起学猫叫</p></slot>
    <!--    第三种方式 命名插槽-->
    <slot name="part1"></slot>
    <slot name="part2"></slot>
    <slot name="part3"></slot>
<!--    插槽作用域-->
    <slot name="part4" :user="username"></slot>
    <slot name="part5" user="六啊"></slot>
    <slot name="part6" user="七啊"></slot>
    <slot name="part7" user="八啊"></slot>