一、什么是vue
vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
二、与原生JS的区别
我们可以通过一个小案例来演示
案例:把输入框中的信息实时显示在span标签中
原生JS
Vue
{{msg}}
区别:其中明显的区别就是省去了对DOM元素的操作
总结:
- 创建DOM元素,使其成为Vue实例的挂载点,Vue实例中的所有数据这能在挂载点中使用
- 通过
new Vue
来创建实例对象 el
属性指定当前Vue实例的挂载点data
中是模型数据,这些数据依赖于当前Vue的实例,可以通过控制台输入app.msg
来查看数据- 可以通过插值表达式使用data中的数据
三、数据绑定
数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中
1、内容绑定
将data中的数据显示成内容
{{msg}}
若想显示html标签只要是标签中用v-html
即可
{{msg}}
2、属性绑定
将data中的数据作为某个元素的属性值
使用v-bind
即可,属性可以是内置的,也可以自定义的,简写方式:
{{msg}}
3、表单标签的值
可以使用v-model
指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
1、文本框和文本域
2、复选框
单选框
{{gender}}
下拉框
{{city}}
传递参数
四、事件处理
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
var app = new Vue({ el:'#app', data:{ name:'holle Vue' }, //在 methods 中定义方法 methods:{ greet:function(event){ //this在方法中指向Vue实例 alert(this.name + '!') if (event) { alert(event.target.tagName) } } })
五、列表渲染
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
- {{blog}}
- 姓名:{{stu.name}} 年龄:{{stu.age}}
var app = new Vue({ el:"#app", data:{ blogs:['三国演习','西游记','老夫子'], stus:[ {name:'小明',age:18}, {name:'小张',age:11}, {name:'小王',age:12} ] } })
从服务器中获取数据
- {{item.title}}
六、条件渲染
1、v-if
指令用于条件性的渲染一块内容
hello Vue
2、也可以使用v-else
添加一个else块
hello Vuehello world
3、在
元素上使用v-if
条件渲染分组
当需要切换多个元素的时候可以把v-if
添加到template
内,因为元素是一个不可见元素,渲染的结果将不包含
元素
Title
Paragraph 1
Paragraph 2
4、v-if-else
顾名思义就是充当v-if
的else if块,可连续使用
满分良好及格不及格请输入正确的成绩
5、v-show
同样是根据条件展示元素
hello
与v-if
不同的是v-show
的元素会始终被渲染并保留在DOM中。
一般来说,
v-if
有更高的切换开销,而v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用v-if
较好。
七、Class与Style绑定
我们可以使用v-bind
来绑定类名或内联样式
绑定class,以动态的切换class,也可以与普通的class共存
data{ isActive:true hasError:false }
渲染结果为:
绑定内敛级样式
语法v-bind:style
data:{ activeColor:"red", fontSzie:13 }
也可以直接绑定到一个样式对象中,这样会使模板更清晰
data:{ active:{ color:'red', fontSize:'30px' } }
八、计算属性
当我们需要计算模板中的值时可以使用计算属性(computed)
{{message}}
{{reverseMessage}}
var app = new Vue({ el:"#app", data:{ message:"Hello" }, computed:{ reverMessage(){ return this.message.split('').reverse().join('') } } })
九、侦听器
侦听器可以观察和响应Vue实例上的数据变动
问题:{{answer}}
var app = new Vue({ el: "#app", data: { question: "", answer: [], }, watch: { question(newValue) { this.getAnswer() } }, methods: { getAnswer: function () { let that = this axios.get('http://localhost:3000/answer.php?q=' + this.question) .then(function (response) { that.answer = response.data }) } } })
php代码
演示
nswer = response.data
php代码 ```php
演示
十、插槽
插槽内容
var el_div = { template:}
插槽内容
当组件渲染时,slot
会被替换为插槽内容
。插槽内可以包含任何模板代码
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个
组件中:
我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容,我们可以将它放在
标签内:
现在当我在一个父级组件中使用
并且不提供任何插槽内容时:
后备内容“Submit”将会被渲染:
但是如果我们提供内容:
Save
则这个提供的内容将会被渲染从而取代后备内容:
具名插槽
有时我们需要多个插槽。例如对于一个带有如下模板的
组件:
对于这样的情况,
元素有一个特殊的 attribute:name
。这个 attribute 可以用来定义额外的插槽:
一个不带 name
的
出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个 元素上使用
v-slot
指令,并以 v-slot
的参数的形式提供其名称:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有
v-slot
的 中的内容都会被视为默认插槽的内容。
然而,如果你希望更明确一些,仍然可以在一个 中包裹默认插槽的内容:
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
任何一种写法都会渲染出:
Here might be a page title
A paragraph for the main content.
And another one.
以上就是学习Vue中必掌握的重点知识的详细内容,更多关于Vue重点知识的资料请关注脚本之家其它相关文章!