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: