vue瞭解與初步接觸/使用

Unfool發表於2024-04-27
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>

相關文章