vue|Vue快速入门（上）
文章目录
- Vue快速入门（上）（应急用）
-
- 一、下载和导入Vue
- 二、第一个Vue程序
- 三、条件与循环
- 四、处理用户输入（事件监听器）
- 五、Vue实例
-
- 5.1 $watch（当某个变量被修改后调用）
- 5.2 生命周期
- 六、模板语法
-
- 6.1 文本
- 6.2 原始HTML
- 6.3 Attribute
- 6.4 使用JavaScript表达式
- 6.5 指令
- 6.6 缩写
- 七、计算属性和侦听器
Vue快速入门（上）（应急用） 一、下载和导入Vue 要想用vue，首先，我们肯定要引用vue的“依赖”。这里提供两种方法：
方法一、自己去官网下载vue.js文件
点击这里下载vue.js文件 (由于这里发送的是get请求，无法直接下载，所以你得把网站下的内容都复制出来然后放到一个空白的vue.js文件中再进行使用。)
方法二、使用在线的vue.js
src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">
二、第一个Vue程序 学程序，首先当时是hello,world。直接贴源码：(源码的解析在源码下边）
Hello，World - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js" charset="UTF-8">
{
{message}}
type="text/javascript">
let app = new Vue({el:'#app',
data:{message: "Hello,world"
}
});
解析：
type="text/javascript" src="https://www.it610.com/js/vue.js" charset="UTF-8">
这一句是引入我们的Vue，不用讲应该都能知道。
{
{message}}
这一段是定义我们的div的id为app，然后使用两个花括号{ {}}引用我们定义的data的属性。
type="text/javascript">
let app = new Vue({el:'#app',
data:{message: "Hello,world"
}
});
这一段是最关键的，用Ajax来说，new Vue这一步其实就相当于$，然后el其实就是我们的element，#表示获取id值，直接写字符串是获取标签，.类名表示获取class。然后data就是他里面被赋值的变量。我们可以通过{ {变量名}}进行获取。
注意：vue的使用最好是放在body的最下边。否则可能会因为获取不到 id ，导致message没有正常渲染。
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
文章图片
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
三、条件与循环 v-if 属性表示条件：
条件与循环 - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
现在你能看到我了!
type="text/javascript">
let demo = new Vue({el:"#demo",
data:{seen: true
}
});
显示：
文章图片
我们可以在console中把他的seen变为false，将它隐藏。
文章图片
循环语句也很简单，使用v-for标签遍历，指明遍历哪个变量，每个被遍历到的属性的变量即可。
循环语句 - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
-
学号：{
{item.id}},
姓名：{
{item.name}},
年龄:{
{item.age}}
type="text/javascript">
let demo = new Vue({el:"#List",
data:{studentList:[
{
id:'1001',name:'张三',age:18},
{
id:'1002',name:'张三',age:18},
{
id:'1003',name:'张三',age:18},
{
id:'1004',name:'张三',age:18},
{
id:'1005',name:'张三',age:18},
]
}
});
结果：
文章图片
四、处理用户输入（事件监听器） 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器 ，通过它调用在 Vue 实例中定义的方法：
监听器 - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
{
{message}}
type="text/javascript">
let demo = new Vue({el:"#onDemo",
data:{count:0,
message:'我是人见人爱的段落哟'
},
methods:{updateMsg: function () {if(++this.count %2 == 0){this.message = '不管怎么样，我都是人见人爱的段落。'
}else {this.message = '跟你说了我永远是人见人爱的段落了吧。'
}
}
}
})
显示：
文章图片
奇数次点击按钮显示：
文章图片
偶数次点击按钮显示：
文章图片
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
事件绑定 - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
{
{message}}
type="text/javascript">
let demo = new Vue({el:"#demo",
data:{message:'Hello'
}
})
运行：（p能读取input的内容并实时显示）
文章图片
五、Vue实例 5.1 $watch（当某个变量被修改后调用）
通过调用new Vue（）返回的对象的$watch方法，在每次某个变量发生改变的时候
监听器 - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
{
{message}}
type="text/javascript">
let demo = new Vue({el:"#onDemo",
data:{count:0,
message:'我是人见人爱的段落哟'
},
methods:{updateMsg: function () {if(++this.count %2 == 0){this.message = '不管怎么样，我都是人见人爱的段落。'
}else {this.message = '跟你说了我永远是人见人爱的段落了吧。'
}
}
}
});
//监听demo的count变量
demo.$watch('count', function (newVal, oldVal) {console.log("The oldVal of count is "+oldVal);
console.log("The newVal of count is "+newVal);
});
//监听demo的message变量
demo.$watch('message',function (newVal, oldVal) {console.log("The oldVal of message is "+oldVal);
console.log("The newVal of message is "+newVal);
});
结果：
文章图片
点击两次按钮后：
文章图片
文章图片
5.2 生命周期
直接看图就行了，没学过的如果看不懂的话也不要紧，等学差不多了再回来看一次就行了。
这里大概说一下：这里目前最主要的就是知道这些个方法（我们也叫钩子）在什么时候会被调用，比如
| 钩子 | 调用时间 |
|---|---|
| beforeCreate | 在Vue对象被创建前 |
| created | 在Vue对象被创建后 |
| beforeMount | 在el渲染成html之前 |
| mounted | 在el渲染成html之后 |
| beforeUpdate | 数据发生改变之前 |
| updateed | 数据发生改变之后 |
| beforeDestroy | 拆除watcher、子组件、事件监听器前 |
| destroyed | 拆除watcher、子组件、事件监听器后 |
文章图片
用法也比较简单，这里给出一个实例：
let demo = new Vue({el:"#onDemo",
data:{count:0,
message:'我是人见人爱的段落哟'
},
created: function(){console.log("The count is "+this.count);
console.log("The message is "+this.message);
},
methods:{updateMsg: function () {if(++this.count %2 == 0){this.message = '不管怎么样，我都是人见人爱的段落。'
}else {this.message = '跟你说了我永远是人见人爱的段落了吧。'
}
}
},
});
六、模板语法 6.1 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
{ { msg }}\Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。
如果我们不希望这个值发生改变的话，那么我们可以给对应的标签加上v-once属性。（注意：这会影响到该节点上的其它数据绑定）
这个将不会改变: { { msg }}6.2 原始HTML
【vue|Vue快速入门（上）】双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
原始HTML - 锐客网
type="text/javascript" src="https://www.it610.com/js/vue.js">
Using mustaches: {
{ rawHtml }}
>
demo = new Vue({el:"#demo",
data:{rawHtml: 'This should be red.'
}
})
结果：
文章图片
如果这么写：
Using v-html directive: v-html="rawHtml">
结果：
文章图片
注意：在我们自己的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
6.3 Attribute
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 参数甚至不会被包含在渲染出来的