01_初识Vue

1.基础代码

<!-- html代码 -->
<div id="root">
     <h1>hello, {{name.toUpperCase()}}, {{address}}!</h1>
</div>

<!-- js代码 -->
<script>
      Vue.config.productionTip = false;  // 阻止 vue 在启动时生成生产提示

      // 创建Vue实例
      new Vue({
          el: "#root",  // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
          data: {       // data中用于存储数据,数据供el所指定的容器去使用,值暂时先写成一个对象
              name: 'atguigu',
              address: '北京'
          }
     })
</script>

• Vue.config.productionTip = false; 为了阻止 vue 在启动时生成生产提示
• el: 用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
• data{}: data对象中用于存储数据,数据供el所指定的容器去使用,值暂时先写成一个对象

2.注意事项

• Vue实例和容器是一一对应的；
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

 

注意区分表达式和js代码:

• 表达式:一个表达式会产生一个值, 可以放在任何一个需要值的地方:

1. a;
2. a+b;
3. demo(1);
4. x === y ? 'a' : 'b'

• js代码(语句):

1. if( ){ }
2. for( ){ }