Vue的基本使用

Vue
前端的三大框架（开发单页面应用框架）
  • angular  诞生于2009年，由谷歌创建
  • React 由faceBook在2013年开始
  • Vue 由中国的在校大学生尤雨溪创建于2014年
Vue概述（官网：https://cn.vuejs.org/）：构建用户界面的渐进式框架，核心库只关注视图层，还便于与第三方库或既有项目整合
指令
1.1 Vue框架的基本使用   
  • Vue会对外抛出一个Vue对象，我们可以输出他，使用console.log(Vue)
  • 通过Vue绑定标签
        <body>
    <div id="box">123456{{age}}</div>
</body>
</html>
<script>
    /*引入Vue后，对外暴露一个Vue的构造函数*/
    // console.log(Vue);
    var vm = new Vue({
       //element的简写 将Vue的实例和标签进行联系
        el:"#box",
        data:{
            age:200
        }
    });
    //数据修改
    vm.age = 100;
 
 
</script>
  •     Vue框架的指令都是以v-xxx开头 为什么以v开头是因为是Vue提供的
指令：作为标签属性直接使用 操作标签的（文本，样式，事件）
常用指令:
  1. v-txt:修改标签的文本 就是{{}}的简写
  2. v-html:修改标签的文本
以上两个的区别：如果v-html渲染的字符串中有标签会渲染成标签显示
  1. v-show：控制标签的显示隐藏
  2. v-if:控制标签上树和下树
 
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
    <div id="app">
        <div v-text="text1"></div> //修改标签的文本 就是{{}}的简写
        <div v-html="html1"></div> //修改标签的文本
        //以上两个的区别：如果v-html渲染的字符串中有标签会渲染成标签显示
        //v-show 控制标签的显示隐藏
        <div v-show="1-1==0">显示</div>
        <div v-show="0">隐藏</div>
        //@click 点击事件 @click和v-on:click是一样的效果 @是v-on:的简写，这里写了一个导航切换的效果
        <button @click="add('新闻')">新闻</button>
        <button @click="add('爱情')">爱情</button>
        <button @click="add('金钱')">金钱</button>
        <ul v-show="'新闻'==showtext">
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
            <li>新闻</li>
        </ul>
        <ul v-show="'爱情'==showtext">
            <li>爱情</li>
            <li>爱情</li>
            <li>爱情</li>
            <li>爱情</li>
        </ul>
        <ul v-show="'金钱'==showtext">
            <li>金钱</li>
            <li>金钱</li>
            <li>金钱</li>
            <li>金钱</li>
        </ul>
        <input type="text" v-model="num">
        //v-if v-else-if v-else 也是显示和隐藏但是这三个会移除标签，
        //而上面的show只是通过修改样式dispaly：none来做的隐藏,而且这三移除树很消耗资源
        <div v-if="num==0">if</div>
        <div v-else-if="num==1">else if</div>
        <div v-else>else</div>
        //数据的动态绑定（双向绑定）
        <div>{{hobby}}</div>
        <input type="text" v-model="hobby">
        <button v-on:click="add2">点击增加</button>
        //循环item代表内容 index代表的是下标
        <h2 v-for="(item,index) in arr">{{item}}----{{index}}</h2>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            text1:"text文本",
            html1:"html文本",
            showtext:"新闻",
            arr:["我","爱","你"],
            hobby:"1",
            num:0,
        },
        methods:{
          add(data){
              this.showtext=data;
          },
          add2(){
              this.arr.push(this.hobby)
          }
        }
    })
</script>
 
 
posted @ 2021-07-24 00:01  七七负柒柒  阅读(173)  评论(0)    收藏  举报