迎着风跑  
vue 基础 绑定样式 双向绑定 标签属性绑定 循环

一、VUE简介

VUE是一套前端框架，尤雨溪，前谷歌的软件工程师。

框架：提供一整套解羞方法(显示，效果，请求访问)

库：只提供针对某一种情况的解决方案

  • Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

  • Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

  • Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

  • 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

1、类比JQUERY

jqueryvue说明
$().text() {{ … }} 插值表达式,为标签设置文本内容
$().attr() <br/> $().prop() v-bind 为标签设置属性
$().val() v-model 获取或为表单设置值
$().html() v-html 获取或为标签设置内容包含html值

 

二、VUE入门案例

1、搭建vue环镜

  • 引入vue.js支持

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    ​
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  • 创建vue入口和实例对象


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--使用插值表达式显示变量中的值-->
            <p>我的名字是：{{username}}</p>
        </div>
    </body>
    <!--重点-->
    <script type="text/javascript">
        //实例化vue对象
        let vue=new Vue({
            el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
            data:{//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
                //数据，所有需要显示在vue界面上的数据，都需要先在data属性中进声明，否则页面无法解析
                //凡是在vue界面上需要动态显示的数据，必须先在data函数中进行变量声明，然后在vue挂载点中进行调用
                username:"张三"
            },created(){//相当于jquery的ready方法，当vue加载完成后，自动执行
                //调用变量
                this.username="王五";
            }
        });
    </script>
    </html>

2、vue页面构成

  • 模板(html代码)

  • 数据(JS代码vue实例中的内容)

  • 指令：配合数据(vue实例)在模板中对数据显示做效果(判断，循环)，指令一般以v-开头

3、data函数的写法

  • 写法一:


    <script type="text/javascript">
        //实例化vue实例
        let vue=new Vue({
            el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
            data:{
                user:{username:'张三',age:18}
            }
        });
    </script>

  • 写法二：


    <script type="text/javascript">
        //实例化vue实例
        let vue=new Vue({
            el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
            data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
                return {
                    users: { //对象
                        username: "a",
                        age: 19
                    }
                }
            }
        });
    </script>

需要注意的是，虽然 data 属性的写法有 2 种，但是

  • 第 1 种的 data: { ... } 对象的写法在未来会出现问题！某些场景中它不适用。

  • 第 2 种的 data () { return {...} } 函数的写法则一直有效。

    <font color=red>以后我们使用第二种方式，不在使用第一种方式</font>.

三、VUE常用指令

1、循环指令v-for

  • 基本用法


    <ul>
        //us表示保存循环出的每个值
        //in循环关键字，相当于foreach的:
        //userList要循环的数组
        <li v-for="us in userList">姓名：{{us.username}}  年龄：{{us.age}}</li>
    </ul>

  • 获得循环下标


    <ul>
        //us表示保存循环出的每个值
        //index表示循环的下标
        //in循环关键字，相当于foreach的:
        //userList要循环的数组
        <li v-for="(us,index) in userList">序号:{{index+1}}  姓名：{{us.username}}  年龄：{{us.age}}</li>
    </ul>

2、判断指令v-if v-else

v-else-if 和 v-else是用来判断


<body>
<div id="app">
    <!--
       14>   未成年
       15     20   少年
       21     30  青年
    -->
    <p v-if="age<14">未成年</p>
    <p v-else-if="age>=15 && age<=20">少年</p>
    <p v-else-if="age>=21 && age<=30">青年</p>
​
</div>
</body>
<!--重点-->
<script type="text/javascript">
    //实例化vue实例
    let vue=new Vue({
        el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
        data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
            return {
                age:18
            }
        }
    });
</script>

 

3、标签属性绑定v-bind

为标签设置属性值


语法：
v-bind:属性名="变量名"
​
案例：
<div id="app">
    //disabled:属性名称
    //disabStr:disabled属性的值
    <input type="button" v-bind:disabled="disabStr"  value="我是按钮">
</div>
</body>
<!--重点-->
<script type="text/javascript">
    //实例化vue实例
    let vue=new Vue({
        el:"#app",
        data(){
            return {
                //变量，用来保存disabled属性的值
                disabStr:false
            }
        }
    });
</script>

 

4、v-bind为标签绑定样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">
        .colorstyle{
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <p>当前已经过了：{{time}}</p>
    <!--
    colorstyle:类样式的名称
    data函数中的变量，是一个布尔值
    -->
    <input type="button" v-bind:disabled="disabStr" 
           v-bind:class="{'colorstyle':colorcss}"  
           value="我是按钮">
</div>
</body>
<!--重点-->
<script type="text/javascript">
    //实例化vue实例
    let vue=new Vue({
        el:"#app", //表示哪个节点是vue的根节点，vue的挂载点，所有vue代码都要写在该id属性值所在的div标签中
        data(){//在这里面声明的变量是全局的，在整登个new Vue范围内都可以调用
            return {
                disabStr:false,
                time:0,
                colorcss:true  //控制是否显示样式,true表示显示   false：不显示
            }
        },created(){
            setInterval(()=>{
                this.time++;
                this.disabStr=!this.disabStr;
            },1000);
        }
    });
</script>
</html>

 

5、v-model双向数据绑定

  • v-bind：用来为标签设置属性值，只能将data函数中的变量值赋给属性

  • v-model：主要用在表单上，获得表单的数据并保存到data的变量中


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    ​
    </head>
    <body>
    <div id="app">
           <input type="text" v-model="msg">
           <p>{{msg}}</p>
    ​
           <p>
               <input type="radio" v-model="sex" value="男">男
               <input type="radio"  v-model="sex" value="女">女
           </p>
        <p>你的性别是：{{sex}}</p>
    </div>
    </body>
    <!--重点-->
    <script type="text/javascript">
        //实例化vue实例
        let vue=new Vue({
            el:"#app",
            data(){
                return {
                    msg:"你好啊",
                    sex:''
                }
    ​
            }
        });
    </script>
    </html>

6、添加html到标签指令v-html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="js/vue.js"></script>
​
</head>
<body>
<div id="app">
    <div  v-html="str" style="border: 1px solid red; width: 300px;height: 300px"></div>
    <input type='button' v-on:click='btnAdd' value='添加图'>
</div>
</body>
<!--重点-->
<script type="text/javascript">
    //实例化vue实例
    let vue=new Vue({
        el:"#app",
        data(){
            return {
                str:""
            }
        },methods:{
            btnAdd(){
                this.str="<img src='images/06.jpg' width='200' height='200'>";
            }
        }
    });
</script>
</html>

 

posted on 2021-10-19 12:21  迎着风跑  阅读(743)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3