vuejs笔记

vue2和vue3的不同：
1、vue2和vue3双向数据绑定原理发生了改变，vue3更有优势；
2、Vue3可以拥有多个根节点，Vue2只拥有一个根节点；（还有更多细节，不列举了）

Vue2和Vue3创建方式：

Vue2：选项类型API
new Vue({
    el: '#app',

    data: {
        count: 0
    },

    methods: {
        add: function() {
            this.count++;
        }
    }

});

Vue3：选项类型API
Vue.createApp({
    data() {
        return {
            count: 0
        }
    },

    methods: {
        add() {
            this.count++;
        }
    }

}).mount('#app');

Vue3：组合式API
<script setup> //开始标注setup，最后不用再mount()绑定
import { reactive } from 'vue';

let count = ref(0); //定义响应式数据，reactive定义引用类型，ref一般定义基本类型（也可引用类型），ref变量使用时需要.value；

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

 

指令：

<div id="app">
　　<p>{{ name }}</p> //使用双大括号的插值；
　　<p>{{ 5+5 }}  {{ name.split('').reverse() }}</p> //双大括号支持表达式；
　　
　　<p v-html="content"> </p> //使用 v-html 用于输出 html ；
　　<p v-bind:id="id" :name="id"> </p> //使用 v-bind 指令绑定变量，v-bind 缩写为冒号：；
　　<p v-show="isMan">i'm a man</p> //使用 v-show 指令是否显示；
　　
　　//条件判断
　　<p v-if="isMan">i'm a man</p>
　　<p v-else >i'm a woman</p>

　　//循环：主要在自定义组件上循环，需要加上key
　　<li v-for="(item, index) in likes"  :key="index">  
　　{{ index }} - {{ item.message }}
　　</li>

　　//表单
　　<form>
　　　　<input v-model="name" placeholder="姓名">
　　　　<input v-model="isMan" type="checkbox" > 男
　　　　<textarea v-model="content"></textarea>
　　</form>

　　//事件，v-on 指令可以缩写为 @ 符号
　　<p v-on:click="showName"></p>
　　<p @click.stop="showName"></p> //事件修饰符：.stop-阻止冒泡、.once-只触发一次、.self-只监听触发该元素的事件
　　<p @click="showMessage('hello',$event)"></p> //传递事件，通过event.target.tagName访问到该元素。

　　//模板引用，通过ref，直接访问底层 DOM 元素：this.$refs.myinput
　　<input id="id1" ref="myinput">

</div>

<script>

Vue.createApp({
　　data() {
　　　　return {
　　　　　　id : "id-test",
　　　　　　name : "Mr Wang",
　　　　　　content : "<span>it is a text</span>",
　　　　　　isMan ： true,
　　　　　　likes: [{ message: 'run' }, { message: 'eat' }, { message: 'sleep' }]，//数组
　　　　　　
　　　　　　
　　　　}
　　},

　　computed: {  //计算属性
　　　　reversedText() {
　　　　　　return this.text.split('').reverse().join('');
　　　　}
　　},

　　watch : { //监听属性，监听函数名 跟 被监听的变量名 相同；
　　　　name(newValue, oldValue){
　　　　　　alert("修改前值为: " + oldValue + "，修改后值为: " + newValue);
　　　　}
　　},

　　methods: { //方法
　　　　showName(){
　　　　　　alert(this.Name);
　　　　},
　　　　showMessage(message,event){
　　　　　　alert(message);
　　　　}
　　},

}).mount('#app');


</script>

 

 

 

 

1、多维数组遍历时，可以借助标签：template，循环输出，该标签不会显示到dom中：

        <div id="app">
             <template v-for="book in books">
                   <div>类型:{{book.name}}</div>
                   <template v-for="b in book.content">
                          <div>书名:{{b.name}} 作者:{{b.author}}</div>
                   </template>
             </template>
        </div>

 

2、在Vue中 data和props的区别：dada中的数据赋值给组件后，可以修改（可读可改），props中的数据，赋值给组件后，不能修改了（只读）。