尚硅谷Vue2.0 全套教程 Part2丨vuejs从入门到精通笔记 | Vue_Test

最新推荐文章于 2023-03-16 14:15:32 发布

原创

最新推荐文章于 2023-03-16 14:15:32 发布 · 479 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客是尚硅谷Vue2.0全套教程的笔记，涵盖了Vue的基础知识，包括初始Vue、数据绑定、MVVM模型、事件处理、计算属性、监听属性、样式绑定等内容，深入探讨了Vue的模板语法和组件化开发。此外，还介绍了Vue CLI的使用，如脚手架、ref属性、props配置、mixin混入、插件和scoped样式等。

Vue2+3 - 尚硅谷Vue技术全家桶

（天禹老师主讲）笔记

把Part1也一并加入过来了 😃

1. Vue_basic

1.1 初始Vue

<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
<div id="demo">
	<h1>Hello, {
  
  {name.toUpperCase()}},{
  
  {address}}</h1>
</div>
<script>
// 创建Vue实例
new Vue({
     
     
	el:'#demo',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data: {
     
     
		name:'atguigu',
		address: '北京'
	}
})
</script>

1.2 Vue模板语法

插值语法，指令语法

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{
  
  {name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{
  
  {school.name}}学习1</a>
    <a :href="school.url" x="hello">点我去{
  
  {school.name}}学习2</a>
</div>

1.3 数据绑定

<!-- 准备好一个容器-->
<div id="root">
    <!-- 普通写法 -->
    <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/> -->

    <!-- 简写 -->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>

    <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
    <!-- <h2 v-model:x="name">你好啊</h2> -->
</div>

1.4 el与data的两种写法

el的两种写法

const v = new Vue({
     
     
    el:'#root', //第一种写法
    data:{
     
     
        name:'尚硅谷'
    }
})

const v = new Vue({
     
     
    data:{
     
     
        name:'尚硅谷'
    }
})
v.$mount('#root') //第二种写法

data的两种写法

// 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

//data的两种写法
new Vue({
     
     
    el:'#root',
    //data的第一种写法：对象式
   	data:{
     
     
        name:'尚硅谷'
    } 	
})

new Vue({
     
     
    el:'#root',
    //data的第二种写法：函数式
    data(){
     
     
        console.log('@@@',this) //此处的this是Vue实例对象
        return{
     
     
            name:'尚硅谷'
        }
    }
})

Vue管理的函数一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

https://blog.csdn.net/qq_53841687/article/details/125770647

1.5 MVVM模型

MVVM模型

\1. M：模型(Model) ：data中的数据

\2. V：视图(View) ：模板代码

\3. VM：视图模型(ViewModel)：Vue实例

1.6 数据代理

1.7 事件处理

<body>
<!-- 
	Vue中的事件修饰符：
        1.prevent：阻止默认事件（常用）；
        2.stop：阻止事件冒泡（常用）；
        3.once：事件只触发一次（常用）；
        4.capture：使用事件的捕获模式；
        5.self：只有event.target是当前操作的元素时才触发事件；
        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{
  
  {name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

    <!-- 阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
    </div>

    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>

    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>

    <!-- 只有event.target是当前操作的元素时才触发事件； -->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
    <ul @wheel.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
     
     
    el:'#root',