VUE

最新推荐文章于 2022-07-07 22:05:43 发布

丶浪世

最新推荐文章于 2022-07-07 22:05:43 发布

阅读量120

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45006107/article/details/91855374

版权

vue简介安装

==》vue 读音与 view 相似

==》三大前端框架：
angular.js
react.js
vue.js

==》vue：
构建前端界面的，渐进式的js框架。（渐进式，逐步安装加载，不是全部一下安装进来。）
spa (single page application) 单页面应用。

特点：
    数据双向绑定
    组件化

==》官网地址：[https://cn.vuejs.org/index.html]

==》下载vue.js：[https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js]

============================================================================================================

vue.js基本语法

==》外部引入

<script type="text/javascript" src="vue.js"></script>

==》实现 vue 实例

<script>
window.onload=function(){
    var vm = new Vue({
        el:"#app",      // ELement
        data:{
            msg:'hello vue'
        }
    });
}
</script>

==》页面渲染

 <div id="app"> {{ msg }} </div>

==》课堂示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body> 
    <div id='zhs'>
        张汇森：{{ favor }}
    </div> 
    <div id="app">
      <table>
          <tr>
              <td>姓名</td>
              <td>职业</td>
          </tr>
          <tr>
              <td>{{ name }}</td>
              <td>{{ job }}</td>
          </tr>
      </table>      
    </div>
</body>
<script>
var laoxu= {name:'徐达',job:'cto',age:18};

var vm = new Vue({
    el:"#app",  // ELement
    data:laoxu
});

var vn =new Vue(
    {
        el:"#zhs",
        data:{
            favor:'吃饭  睡觉  打豆豆'
        }
    }
);
</script>
</html>

============================================================================================================

Vue.js模板语法

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js示例2 模板语法</title>
    <script type="text/javascript" src="./vue.js"></script>
    <style>
        .t1 {
            font-size: 18px;
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class='title1'>这是大标题 </div>
        <a v-bind:href="url" v-bind:title='title2'>{{ site }}</a>
    </div>
</body>
<script>
new Vue({
    el:"#app",
    data:{
        title1:'t1',
        url:'https://www.baidu.com',
        title2:'这是到百度的链接',
        site:'百度'
    }
});
</script>
</html>
```

==》模板语法
{{ }} 中可以放置属性，表达式，三元运算，语句
```

这是大标题

        {{ 5+9 }}

        {{ site=='百度' ? url : 'no url' }}

        {{ daya.split("").reverse().join("") }}

    </div>
</body>
<script>

new Vue({
    el:"#app",
    data:{
        title1:'t1',
        url:"<a href='https://www.baidu.com'>百度</a>",
        title2:'这是到百度的链接',
        site:'百度',
        res:'9+6+3+2',
        daya:'大头大头下雨不愁'
    }
});
</script>
```

==》v-if 指令：判断属性的真假
```

==》v-on 指令：监听事件；click是鼠标点击事件；dosth 是函数名字，要写在 Vue 的方法里
```
你被点中了

==》点你咋地案例:
<button v-on:click="dosth">{{ dianni }}</button> <script> var vm=new Vue({ el:"#app", data:{ dianni:'你点我试试', clickTimes:0, }, methods:{ dosth:function(){ console.log(this.clickTimes) if(this.clickTimes==0){ this.dianni='你点我干啥？'; } if(this.clickTimes==1){ this.dianni='点你咋地？'; } if (this.clickTimes==2) { this.dianni='你再点一下试试'; } if (this.clickTimes==3) { this.dianni='试试就试试'; } this.clickTimes= this.clickTimes+1; } } }); </script>

==》指令： v-bind（绑定） v-if（判断） v-on（监听）

v-if
v-bind 可简写为 :
v-on 可简写为 @

v-bind 可以简写为 :
    例如：
    ```
     <div v-bind:class='title1'>这是大标题 </div>
    ```
    可以简写为：
    ```
     <div :class='title1'>这是大标题 </div>
    ```

v-on 可以简写为 @
    例如:
    ```
    <button v-on:click="dosth">{{ dianni }}</button>
    ```
    可以简写为：
    ```
    <button @click="dosth">{{ dianni }}</button>
    ```

==》课堂练习作业 — 点击按钮反转字符
<body> <div id="app"> {{ reverseData }} <button @click="reversNumber">反转</button> </div> </body> <script> var vm=new Vue({ el:"#app", data:{ reverseData:'12345', }, methods:{ reversNumber:function(){ this.reverseData=this.reverseData.split("").reverse().join(''); } } }); </script>

丶浪世

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE

vue简介安装==》vue 读音与 view 相似==》三大前端框架：angular.jsreact.jsvue.js==》vue：构建前端界面的，渐进式的js框架。（渐进式，逐步安装加载，不是全部一下安装进来。）spa (single page application) 单页面应用。特点：数据双向绑定组件化==》官网地址：[https://cn.vuej...
复制链接

扫一扫

VUE

“相关推荐”对你有帮助么？