vue 指令

v-text和v-html的区别：
v-text :会进行转译
v-html：不会进行转译

v-html demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-html="content"></div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",

        data:{
         content:"<h1>愿所有努力不被辜负</h1>"
        }
      })
  </script>
</body>
</html>

　　效果：

v-text demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">
        <div v-text="content"></div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",

        data:{
         content:"<h1>愿所有努力不被辜负</h1>"
        }
      })
  </script>
</body>
</html>

　　效果：

v-on:给元素绑定click事件，触发handleClick方法，定义在vue实例的methods

v-on：给元素绑定click事件
v-on:click="handleClick"：触发handleClick方法
methods: 定义在vue实例的methods被调用
通过this.content 改变实例里面数据 vue实例尖听数据的改变更新模板
this.content="加油是的"

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
  <div id="first">

        <div v-on:click="handleClick">{{content}}</div>
  </div>
  <script>
      new  Vue({
        //绑定上面的id el指的是vue实例跟哪个dom节点绑定
        el:"#first",
        data:{
              content:"明天会更好"
        },
        methods: {
          handleClick: function(){
             this.content="加油 是的"
          }
        }
      })
  </script>
</body>
</html>

效果：

2018-05-01 11:59:31

猜你喜欢