vue了解与初步接触/使用

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>
posted @ 2024-04-27 20:02  Unfool  阅读(55)  评论(0)    收藏  举报