<p v-text='username'></p>
 
 
 
 
const vm=new Vue({
    el:'app',
    data:{
    username:'zhangsan'
}
})

<p >{{username}}</p>
 
 
 
 
const vm=new Vue({
    el:'app',
    data:{
    username:'zhangsan'
}
})

<button v-on:click="add">提交</button>
 
 
 
 
 
 
 
 
 
el:'#app'
 
data:{
},
methods:{
add(){
cl(1)
}
}

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
 
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
 
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
 
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
 
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>



<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>
 
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
 
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

<template v-for="item in dataBase">
       <li v-if="item.age">{{ item.name }}</li>
       <li class="divider" role="presentation"></li>
     </template>

<div id="app">
      <p>{{message|filterL}}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hellow shuaige',
        },
        filters: {
          // 过滤器函数形参永远都是管道符前面的那个值
          filterL(val) {
            // 取索引对应的字符串
            const vl = val.charAt(0).toUpperCase();
            // 截取字符串从指定索引向后截取不包括当前索引
            const ou = val.slice(1, 5);
            return vl + ou;
          },
        },
      });
    </script>
  </body>

// 全局过滤器Vue.filter(过滤器名字,回调函数)
    Vue.filter('filterL', (val) => {
      const vl = val.charAt(0).toUpperCase();
      // 截取字符串从指定索引向后截取不包括当前索引
      const ou = val.slice(1, 5);
      return vl + ou;
    });

<script setup>
import { ref, watch } from 'vue'
 
const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)
 
// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {//includes是查询字符串中是否包含某个字符
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>
 
<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />//默认不能选中是false
  </p>
  <p>{{ answer }}</p>
</template>

const x = ref(0)
const y = ref(0)
 
// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})
 
// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)
 
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

const obj = reactive({ count: 0 })
 
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

const todoId = ref(1)
const data = ref(null)
 
watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

import { watchSyncEffect } from 'vue'
 
watchSyncEffect(() => {
  /* 在响应式数据变化时同步执行 */
})

<div id="app">
      <div>
        <input type="text" v-model="message" />
        <p>{{messageRe}}</p>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hellow',
        },
        computed: {
          messageRe() {
            return this.message.split('').reverse().join('');
          },
        },
      });

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue';
 
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>
 
<style lang="less">启用less
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

props：{
num:Number/
num:{
type:Number
required:true//必填项，默认值不算必须从组件中传过来的值
}
}

<template>
	<div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {
	color: red;
}
</style>