Vue：渐进式JavaScript框架

如何安装使用？？    -->官网下载vue.js然后在自己的项目中引入 https://cn.vuejs.org/v2/guide/installation.html

<!--通过外链方式引入vue.js  注意：Vue就是一个全局变量-->
<script type="text/javascript" src="js/vue.min.js"></script>

Vue入门_helloworld：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vue入门_helloworld</title>
    <!--通过外链方式引入vue.js  注意：Vue就是一个全局变量-->
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!--①创建一个html元素-->
<div id="zq">{{name}}<!--③使用{{ }}}--></div>
<script type="text/javascript">
    /*②创建一个vue对象，挂载到指定zq的html标签上    */
    var test = new Vue({
        el:"#zq",
        data:{
            name:"helloworld"
        }
    })
</script>
</body>
</html>

效果图：

温馨小提示：在这里我是用idea建的web项目，测试中发现html文件只有写在web下才有效，如果你们写的时候发现无效，建议将html文件移动到web下进行测试~

el:挂载到指定名称的html标签上

data:绑定的数据  -->相当于给html中使用的时候所传的值

methods：绑定的方法  [注意：其中this代表Vue对象]     

methods:{

    方法名:function(){  //代码...  }
}

双向绑定： --> 通过指令 v-model    --即修改一方同时修改相同的另一方，达到数据同时更新

案例：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en">
<head>
    <title>Vue入门_helloworld</title>
    <!--通过外链方式引入vue.js  注意：Vue就是一个全局变量-->
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<!--①创建一个html元素-->
<div id="zq">
    <!--③使用{{ }}}-->
    {{person}} <br>
    {{person.age}} <br>
    {{sex}}
    <br>
    {{sayName()}}
    {{whatColor('pink')}}
    <br>
    <!-- 双向绑定 -> 通过指令: v-model-->
    <input type="text" name="name" v-model="sex"><br>
</div>
<script type="text/javascript">
    /*②创建一个vue对象，挂载到指定的html标签上   data：表示数据  注意：只作用在当前挂载的标签中 */
    var v =  new Vue({
        el:"#zq",
        data:{
            person:{
                name:"郑清",
                age:20
            },
            sex:"男"
        },
        methods: {  //vue对象方法
            sayName: function () {
                console.debug(this.person.name) //this表示当前vue对象
            },
            whatColor: function (color) {
                console.debug(color)
            }
        }
    });
    // alert(v.sex)
    v.sex="性别被修改了";
    v.person.name="名字被修改了...";
    v.sayName(); // js调用
</script>
</body>
</html>

效果图：

VueJS表达式

Vue指令：  

v-text=“表达式”             设置标签中的文本
v-html                           设置标签中的html
v-if                                判断条件
v-for                              循环
v-bind:                          绑定属性或对象
v-show:                         判断表达式的值,true则显示,false则隐藏
v-model                        数据双向绑定
v-on                              注册事件

v-bind   简写  :         ex:  v-bind:src  简写之后是  :src

v-show

v-if

v-on

v-model       

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue