前端基础vue

1、指令

 ·v-html,v-text  (单项绑定：数据变，视图变)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    //{{表达式}}：插值表达式只能用在标签体中，调用之后有返回值，可以调用vm中的数据和方法
    <div id="app">
     {{msg}} {{1+1}}  {{hello()}}<br/>

     <span v-html="msg"></span>  //不会转义msg中的<h1>标签
     <br/>
     <span v-text="msg"></span> //会转义msg中的<h1>标签
 </div> <script src="/node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({
 el:"#app", //绑定元素 
 data:{ //封装数据 
    msg:"<h1>hello</h1>" 
 },
 methods: { //封装方法 
    hello(){ 
return "world"; 
} }, }); 

</script> 

</body>

 </html>

·v-bind （单向绑定） :v-bind给HTML标签属性绑定值,用于增强标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


   <!-- v-bind给HTML标签属性绑定值 -->
    <div id="app">
    <a v-bind:href="link">gogogo</a> //v-bind:href等同于:href
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                link:"http://www.baidu.com"
            }
        })
    </script>
</body>
</html>

·v-model (双向绑定：数据变，视图变，反之亦然)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!--表单项，自定义组件 -->
    <div id="app">
        精通的语言
        <input type="checkbox" v-model="language" value="java">java<br/>
        <input type="checkbox" v-model="language" value="php">php<br/>
        <input type="checkbox" v-model="language" value="python">python<br/>
         选中了 {{language.join(",")}}
    </div>
    <script src="/node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language:[]
            }
        })
    </script>
</body>
</html>

·v-on (绑定事件)

语法： v-on:事件名="js 片段或函数名"

另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--事件中直接写 js 片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
        <button v-on:click="decrement">取消</button>
        <h1>有{{num}}个赞</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 100
            },
            methods: {
                decrement() {
                    this.num--; //要使用 data 中的属性，必须 this.属性名
                }
            }
        })
    </script
</body>
</html>

 ·v-for

语法：v-for="item in items"    items：要遍历的数组，需要在 vue 的 data 中定义好。 item：迭代得到的当前正在遍历的元素

 

 <div id="app">
        <ul>
            <li v-for="user in users">  //可以用:key=""  来表明当前正在遍历哪个对象，增强vue渲染的效果
                {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                users: [
                    { name: '柳岩', gender: '女', age: 21 },
                    { name: '张三', gender: '男', age: 18 },
                    { name: '范冰冰', gender: '女', age: 24 },
                    { name: '刘亦菲', gender: '女', age: 18 },
                    { name: '古力娜扎', gender: '女', age: 25 }
                ]
            },
        })
    </script

 

posted @ 2022-11-01 12:30  夜雨可否寄北  阅读(47)  评论(0)    收藏  举报