目录
-
渐进式框架理解:
像agular.js就不是渐进式框架，因为所有的内容都要符合他的规范，而vue就可以和其他的库一起使用，不会出现问题。
点击vue.js开发文档的cdn可以引入，就可以使用vue的内容了。
cdn引入：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
创建Vue对象：
引入CDN的方式，必须实例化一个Vue对象
new Vue方法中传入一个对象
有的属性:el需要获取的元素，必须是html的根元素，data存储的数据。
new Vue({
el:"#vue-app",
data:{
name:"米斯特吴"
}
})
使用{{name}}直接在html接收但是请注意，一定是在获取的html根元素里面才能使用，在外面使用不起作用。
这里的data是一个共享的，也就是对象名.data就能去取出值。
-
事件修饰符
v-on:once,本次事件只执行一次
一般的点击事件可以点击多次，而采用v-once的只能点击一次有效
<button v-on:click.once=clickFun>点击只执行一次</button>
v-on:stop,事件阻止执行，并且执行此次事件，阻止冒泡事件
比如v-on:submit=“alert（“阻止成功）”;就是关于提交表单时，阻止跳转，执行自己的函数，大概思想。
v-on:prevtent事件执行，阻止其他的跳转之类，阻止默认事件，比如a标签的额默认跳转。
键盘事件和键盘修饰符
-
keyup键盘绑定
- KeyDown：用户摁下摁键时发生
- KeyPress：用户摁下摁键，并且产生一个字符时发生
- KeyUp： 用户释放某一个摁键时触发
后面。enter就是enter键盘事件才会触动
在哪里输入，就在那个上面绑定键盘事件
-
双向数据绑定
双向数据绑定的意思就是将输入内容，输出内容都绑定在一个上面。
实例1：input实时输入内容打印出来。
第一种老方法
方法二：使用v-model绑定输出的属性，可以将属性值绑上去，还可以将绑定的输入内容实时绑定进来。就是将v-model是将input,select,textarea绑定在上面，后面=就是vue对象创建的data，然后绑定这个值，这样双向绑定后，实时使用输入框中的实时选择值
计算属性computed
就以加一减一来看，只要执行了事件方法，方法里面都要执行一遍，dom执行了消耗资源，Vue里面是采用虚拟Dom来操作，计算属性就不会这么消耗资源。
打印两次，dom耗资源
改成computed属性
但是将方法改为computed后，造成了add不是方法，必须改成属性add()-----add
重点：只要在页面引入的方法，每次执行改变页面都会执行方法，都会检查一边方法，都要执行
vue使用虚拟dom，将真实dom拷贝过来，computed就是采用看真实dom和虚拟dom是否一样，不一样才触发这个computed属性。
-
动态绑定css样式
vue绑定操纵css的内容就是操纵类的值，
v-bind:class="{类名：true}"，采用对象的方式
v-bind:class="{类名：true，类名2：false}"
技巧：可以通过执行一个返回对象的方法来执行多各类。
实例1：点击一个内容变颜色
<style> #vue-app div{ width: 100px; height: 40px; background-color: red; } #vue-app .changecolor{ background-color: blue; } #vue-app .changelength{ width: 200px; } </style> </head> <body> <div class="" id="vue-app"> <button v-on:click="changecolor=!changecolor">改变颜色</button> <button v-on:click="changelength=!changelength">改变长度</button> <div v-bind:class="changeFun ()"> </div> </div> <script src="app.js"></script> </body>
app.js
new Vue({ el:"#vue-app", err:"", data:{ changecolor:false, changelength:false }, methods: { changeFun(){ return { changecolor:this.changecolor, changelength:this.changelength } } }, })
-
Vue方法
同样在方法后面使用methods属性来装。
和data属性一样，通过一个对象来装这些方法。
methods:{
greet:function(){
return "nice";
}
}
可以在html中引用函数传递值
引用data里的属性值使用this.name就可以了。
-
属性绑定
在html中有属性的内容，怎么将值放在属性里面去，因为属性填值有引号所以不行，只有给html标签属性进行v-bind:绑定一下。绑定过后，data的值就可以直接放进去了，不用加双括号了。
注意HTML标签的属性使用data的值时，绑定属性后，将变量方法放进去就可以了，不用加引号，而且加入是类这种，数字值绑定会不成功的，必须字符串，其他的内容就可以
<div v-bind:class=str></div>
当data里面有一个website:"<a>"这种标签内容怎么引入放在页面上去，只有通过html一个标签的内嵌属性，绑定一个v-html="website"这样才能行。
<p v-html=website></p>
如果使用方法必须带括号，不然不是返回值，而是函数体，有无引号都可以，重点是函数体后面点击事件不是要返回值，所以可以是不带括号方法
<div v-bind:class=name v-bind:k=fib()></div>
实例：input随机改变值
<input type="text" v-bind:placeholder=name>
总结：data，methods都可以用在HTML之间，也可以用于属性v-bind,v-html之中，但是的有返回值，引用带括号，放在事件之中，就可以不用内容。
-
事件绑定
在事件绑定中，在标签中使用v-on:click="name"绑定，在里面直接放入函数是可以的,{{name}}属性内容在跟容器里面都可以使用，除了在属性里面.
在双括号里面，方法名必须使用双括号，因为无法区分是属性还是方法，在点击事件的引号里面方法加括号，不加括号都是可以的，因为点击事件里面只有方法。
事件绑定v-on:和@是一样的效果
报错详解：Uncaught SyntaxError: Invalid shorthand property initializer
原因：由于属性改写：x写成等号去了
实例1：
button++,
button--内容
实例2:
dblclick双击事件
和单击事件采用一样的方法，但是增加一个参数传入，一个增加10，一个增加1；
实例3:
在框里滑动,实时1显示相对坐标
练习到以上三个实例,就可以吧=把vue有一个小的认识,进入主页跟着我走把，一起学vue
扫一扫
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
