JavaWEB笔记15 Vue入门+Vue常用操作（上）+案例
文章目录
一.Vue简介：
Vue：构建用户界面的渐进式JS框架
渐进式： 由底层逐层向上：声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建
Vue使用前需要将对应文件引入项目（同之前的jQuery）：
- 1）安装之后在项目JS下粘贴
vue.js - 2）在html页面中引入库文件：
<script src="路径">或者直接引用网络版：<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>或<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue的核心是一种声明式渲染：
hello world案例：
步骤：
1）引用库文件之后创建vue对象：
new Vue({
el:'div',
data:{
键名随意:'hello vue'
}
})
2）在对应要展示的标签中写：<div>{
{ 键名 }}</div> 就可以把上面键名对应的值展示出来
3）在上面创建新的vue对象时，其中el是vue所生效的区域，vue语法仅在el控制的标签内部生效
4）DOM和数据实现绑定，在控制台中改键中数据，控制台中和页面中都对应会发生变化
5）el控制的区域是通过选择器进行选择的
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<b id="box" style="color: red">{
{
msg}}</b>
<script type="text/javascript">
var app=new Vue({
el: '#box',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>
效果：
二.Vue插值表达式：
Vue中的最常用的方式就是：Vue插值表达式，除了会引用对应的值之外还可以进行简单的运算，同时也可以在插值表达式中调用JS的方法，同样支持三元表达式，但是不支持将if和for嵌入，但是必须要有返回值；
但是需要注意：虽说可以在插值表达式中进行运算以及方法的调用，但是一般情况下我们不这么做，运用插值表达式时只是单纯的进行数据展示
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<b id="box" style="color: red">{
{
msg+1}}</b>
<
最低0.47元/天 解锁文章
1684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
