vue第一趴

一 说点什么

简述： 因本身有前端基础，又喜欢在实践中获得真知，故采用边看边动手的模式

二 开搞

1. 首先是vue文件整体结构，一块整结构，一块整动作

<script setup>

</script>

<template>

</template>

2. 来个ref()函数，构建一个对象，直接(对象.属性)操作，java老开发狂喜

<script setup>
import { ref } from 'vue'    

const message = ref('hello,world');  
console.log(message.value)
message.value = 'changed'  //这一行浓浓的对象感
  
</script>

<template>
  {{message}}     //这引用变量，舒服
</template>

 3. v-bind,  绑定dom元素的属性, 关联一个全局变量，可以统一修改样式，巴适

<script setup>
import { ref } from 'vue'
const titleClass = ref('title')
</script>

<template>
  <h1 v-bind:class='titleClass'>Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

<style>
.title {
  color: red;
}
</style>

 4. v-on，监听dom事件，参数是事件，参数值是函数

<script setup>
import { ref } from 'vue'
const count = ref(0)

function addCount(){
  count.value ++;
}
</script>

<template>
  <!-- 使此按钮生效 -->
  <button v-on:click="addCount">count is: {{ count }}</button>
</template>

 5. v-model 表单绑定，v-bind和v-on的集合，实际是监听输入动作触发函数，将变量值服給输入框

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

 6. v-if, v-else，v-else-if 条件渲染，展示不同div

<script setup>
import { ref } from 'vue'
const awesome = ref(true)

function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

 7. v-for 搞一波列表的增删改，拿来即用

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {

}

function update(todo) {
  todo.text = newTodo.value
}
  
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
      <button @click="update(todo)">U</button>
    </li>
  </ul>
</template>

 8. 计算属性

比如实时变化的容器，比如列表，比如页面样式，比如各种动作，都可以定义一个实时变量

计算属性，比如 计算属性c = a+b, 如果之后a和b的值变了，那么c也会跟着变，实时计算属性值

filter() 函数，输入一个条件，符合留下，返回一个新数组

()=>{}  函数定义形式，类似于 function(){}

<script setup>
import { ref,computed} from 'vue'

let id = 0

const newTodo = ref('')
const hideCompleted = ref(false)
const todos = ref([
  { id: id++, text: 'Learn HTML', done: true },
  { id: id++, text: 'Learn JavaScript', done: true },
  { id: id++, text: 'Learn Vue', done: false }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value, done: false })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}

const filteredTodos = computed(() => {
  return hideCompleted.value ? todos.value.filter((t) => !t.done) : todos.value;
})
  
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

 比如：变量动态更新，不用专门监听

<script setup>
import { ref, computed } from 'vue'


const size = ref(0);
// 用computed联动变化,定义computed变量
const multiColor = computed(()=>{
  return Number(size.value) + 1;
}); 
  
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="size" required placeholder="new todo">
  </form>
  
  <div>
  {{multiColor}}
  </div>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

 9. 生命周期和模板引用

创建dom元素指向的变量，挂载后使用，在钩子函数里面使用

手动操作dom, 创建指向模板中的一个dom元素的ref,

组件挂载后，pElementRef 才指向了组件，所以挂载后，才能操作组件的属性

<script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="pElementRef">hello</p>
</template>

 10 侦听器

侦听一个ref，只要值发生改变，就会触发回调

watch(todoId, fetchData)

 11 组件

引入组件

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

12 Props

子组件暴露参数 

父元素传参，传ref()对象

-- 子组件暴露参数
<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

-- 父组件传参
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

 13 Emits

子元素暴露函数, 

子元素暴露给父元素的内部参数

<script setup>
import { ref } from 'vue';

const sname = ref("jjjjjjjjjjjjjjjjj");

const emit = defineEmits(['hahha'])
emit('hahha',sname.value)
</script>

<dayOne :msg='hahah' @hahha="getDayOne"/>
<div>dayone: {{ dayOneRef }} </div>



function getDayOne(msg){
  console.log("lllllll:" + msg);
  dayOneRef.value = msg;
}

 14 插槽（slot）

父组件将模块片段传递给子组件,  或者说，父元素往子元素预留位置填充内容

<template>
  <slot>Fallback content</slot>   /*插槽预留位*/
</template>

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>  /*插槽*/
</template>