web前端开发之vue基础
一、vue基础
1.1 啥是vue
1.1.1 创建vue
-
引入vue.js 的cdn节点
-
创建一个 id为app的节点
- 如：
- 如：
-
创建vue实例
- el 属性指定当前 vue 实例的挂载点
- vue实例中的所有数据只能在此dom范围内使用
- data 中是模型数据，这些数据依赖于当前的vue实例，可以在控制台中通过下面方式访问data中数据
2.1 数据绑定
2.1.1 内容绑定
直接在标签内使用{ {}}
<div id="app">
<p>{
{msg}}p>
div>
<script>
let app = new Vue({
el: '#app',
data: {
msg:'我是内容绑定'
}
})
script>
双{ {}}只能显示纯文本
如需显示html内容 则需要使用v-html指令
<div id="app">
<p v-html="msg">p>
div>
<script>
let app = new Vue({
el: '#app',
data: {
msg:'我是内容绑定'
}
})
script>
2.1.2 属性绑定
- 所谓属性绑定就是把data中的数据作为某个元素的属性值
- 我们需要使用v-bind:属性名 指令
- 属性可以是内置的 也可以是自定义的
<p v-bind:id="id">{
{id}}p>
<script>
let app = new Vue({
el: '#app',
data: {
id:11
}
})
script>
v-bind: 可以简写为
{
{id}}
2.1.3 表单控件的值
- 可以用
v-model指令在表单、