Vue使用
1、vue的启动
1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve
2、首先先需要检测自己是否安装了yarn 命令
yarn命令和npm的区别
1、yarn是从国内下载npm是从国外下载 所以yarn速度效率比较高,npm速度效率比较低
2、yarn -v -- 可以检测到是否有yarn命令
3、没有可以使用npm 安装淘宝镜像就会是国内的了
4、淘宝镜像可以让npm下载速度提升
2、hello world的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div class="app">
{{s}}
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
s: 'hello world'
}
})
</script>
</html>
3、响应式--->(数据变随之页面变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div class="app">
{{s}}
<br>
<input type="text" v-model="username">
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
s: 'hello world',
username:'quan'
}
})
</script>
</html>
4、模版语法
| 类型 |
详细 |
| data内的数据 |
Vue实例的data中定义的变量都可以使用 |
| 表达式（能产生一个确定的值） |
运算表达式（1+1），函数调用表达式（ fun(1),str.toString() )，三目运算符 |
| 不能是语句 |
如 if 语句，for 语句 |
# 1 在被vue管理的标签中
# 2 插值语法使用 {{}}-->必须是定义再data中的数据
# 3 放：字符串，数字，对象，数组，函数执行，修改变量值，三目运算符。。
-不能定义变量
-不能渲染标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>字符串：{{name}}</h1>
<h1>数字：{{age}}</h1>
<h1>对象:{{userinfo}}-->取对象的值：{{userinfo.name}}</h1>
<h1>数组：{{hobby}}--->数组取值：{{hobby[0]}}</h1>
<h1>运算：{{11+11}}----》变量运算：{{age+userinfo.height}}</h1>
<h1>三目运算符：{{11<10?'真':'假'}}--->变量形式：{{b?'为真':'为假'}}</h1>
<h1>标签：{{a}}</h1>
<h1>可以放函数执行</h1>
<h1>var a =100---不行</h1>
<h1>修改变量值：{{age=99}}</h1>
<h1>修改变量值：{{++age}}--》++age和age++的区别是，前一个先计算，再赋值，后一个先赋值再计算</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'quan',
age: 19,
userinfo: {name: '刘亦菲', height: 168},
hobby: ['篮球', '抽烟', '烫头'],
b: true,
a: '<a href="http://www.baidu.com">你想了解啥</a>'
}
})
</script>
</html>
