vuejs中用javascript代码如何设置style js vue

转载

goody 2023-10-17 10:09:36

文章标签 html Vue javascript 文章分类 JavaScript 前端开发

1.Vue.js是什么？
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
学习vue.js的优势在哪里？
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件。
如果你有一些html、css、和js的知识，那么学习这个讲会有很有趣。否则，学起来会比较难理解。

2.安装Vue.jsz
在官网https://vuejs.org/js/vue.js里下载最新版的vue，将下载的文件导入到项目中（我这里放在lib目录里）的文件夹中。
3.使用vue基础示例
在项目中创建一个.html文件，然后通过如下方式引入Vue：

<script src="https://unpkg.com/vue/dist/vue.js">

插值表达式的运用，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值表达式的学习</title>
</head>
<body>
    <div id="app">
        <p v-cloak="{{msg}}"></p>
        <p>{{msg}}</p>
        <p v-text="msg1"></p>
        <p v-text="msg2"></p>
        <p v-html="msg2"></p>
    </div>


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

<script type="text/javascript">
    var vm = new Vue({
        //绑定属性
        el:"#app",
        data:{
            msg:"hello",
            msg1:"hello啊 深信服",
            msg2:"<p>我是一个p标签</p>"
        }
    });
</script>
</body>
</html>

在网页中运行图为：

vuejs中用javascript代码如何设置style js vue_Vue

vue中的v-bind、v-on指令的学习（直接上代码看结果）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind、v-on指令的学习</title>
</head>
<body>

    <div id="app">

        <p>
            用户名：<input type="text" name="username" v-bind:value="msg"/>
        </p>
        <p>
            用户名：<input type="text" name="username" :value="msg"/>
        </p>
        <p>
            用户名：<input type="text" name="username" :value="msg+'你好'"/>
        </p>
        <p>
            用户名：<input type="text" name="username" :value="msg+name"/>
        </p>
        <button v-on:click="sayHello(name)">点击</button>
        <button @click="sayHello(name)">点击</button>
    </div>

    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"我是来自model中的内容",
                name:"迪丽热巴"
            },
            methods:{
                sayHello:function (name) {
                    alert("你好！"+name);
                }
            }
        });
    </script>
</body>
</html>

运行看结果

vuejs中用javascript代码如何设置style js vue_javascript_02

使用vue实现跑马灯效果

<!DOCTYPE html>
<html lang="en" xmlns:style="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>七夕快乐</title>
    <!--<script src="../lib/vue.js" type="text/javascript"></script>-->
</head>
<body>

    <div id="light">
        <button @click="lang2()">浪起来</button>
          |  
        <button @click="stop()">停</button>
        <div style=" text-align:center;font-size:30px;background-color: #31b0d5">
            <h3 v-html="info"></h3>
        </div>

    </div>

    <script type="text/javascript">
        var vm=new Vue({
            el:"#light",
            data:{
                info:"过七夕吧，毕业等着收破烂吧!",
                lightIntervalID:null
            },
            methods:{
                lang1(){
                    if (this.lightIntervalID!=null){
                        return;
                    }
                    var _this=this;
                    this.lightIntervalID=setInterval(function () {
                        //此时的this代表widdow
                        //console.log(this)
                        _this.info=_this.info.substring(1).concat(_this.info.charAt(0));

                    },200);
                },
                lang2:function () {
                    //c
                    if(this.lightIntervalID!==null){
                        return;
                    }
                    this.lightIntervalID=setInterval(()=>{
                        this.info=this.info.substring(1).concat(this.info.charAt(0));
                    },200);
                },
                stop(){
                    clearInterval(this.lightIntervalID);
                    this.lightIntervalID=null;
                }
            }
        });
    </script>
</body>
</html>

运行结果是动态的，这里不展示

使用Vue实现简单的计算机

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的双向数据绑定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>

</head>
<body>
    <div class="box">
        <h1>vue中的双向数据绑定指令v-mode</h1>
        <label>单价：<input type="text" v-model="price"></label><br/>
        <label>数量：<input type="text" v-model="num"></label><br/>
        <button @click="calc()">点击计算总价</button><br/>
        <label>总价：<span style="..." v-text="sum"></span> </label>

        <hr/>

        <h1>使用v-mode双向数据绑定实现简易计算器</h1>
        <label>操作数1：<input type="text" v-model="num1"/></label>
        <select v-model="opr">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <label>操作数2：<input type="text" v-model="num2"/></label>
        <button @click="doCalc()">=</button>
        <span style="..." v-text="result"></span>
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el:".box",
            data:{
                price:12,
                num:1,
                sum:12,
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                calc(){
                    this.sum=this.price*this.num;
                },
                doCalc(){
                    //使用swich分支根据计算类型不同得到不同结果
                    switch(this.opr){
                case "+":
                    this.result = parseInt(this.num1)+parseInt(this.num2);
                    break;
                case "-":
                    this.result = parseInt(this.num1)-parseInt(this.num2);
                    break;
                case "*":
                    this.result = parseInt(this.num1)*parseInt(this.num2);
                    break;
                case "/":
                    this.result = parseInt(this.num1)/parseInt(this.num2);
                    break;
            }
                    //使用eval计算获取结果
                    //this.result=eval（"parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
                }
            }
        });
    </script>
</body>
</html>

看运行结果

vuejs中用javascript代码如何设置style js vue_Vue_03