ZhiAng99
ZhiAng99

Vue基础———模板语法

1.基础模板

Vue是一个模板 刚刚接触的时候他可能会让你感觉十分难受 下面是一个最基本的vue模板

<body>
    <div id="msg">{
     {
     msg}}</div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var newDiv = new Vue({
     
    //el获取的是元素
      el: "#msg",
      //是你要添加到模板的数据
      data: {
     
        msg: "hello word",
      },
    });
  </script>

2.数据填充

1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
3、v-pre用于显示原始信息

<body>
  <div id="app">
    <div>{
     {
     msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{
     {
     msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
      
      4.v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    
    */
    var vm = new Vue({
     
      el: '#app',
      data: {
     
        msg: 'Hello Vue',
        msg1: '
HTML
'
      }
    });
  </script>

运行结果如下图：
Vue基础———模板语法_第1张图片

3.双向数据的绑定（重点）

1.什么是双向数据绑定
答：当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
2.双向绑定的使用场景
答：v-model是一个指令，限制在 、