【无标题】

//得到文本框和div
let i = document.querySelector("input");
let d = document.querySelector("div");

//创建一个元素对象
let h = document.createElement("h1");  //此时创建的是一个h1标签类型 赋值给h

//给h1设置显示的文本内容
h.innerText = i.value;
innerText是文本框类型的工具    value是控件类型的工具

//把h1添加到div里面
d.append(h);

//创建图片元素对象
let img = document.createElement("img");

//设置图片的src属性
img.src = "../b.jpg"

//把图片添加到页面中
d.append(img);

//三目运算符
let url = x==1?"a.jpg":"b.jpg";

//创建图片对象
let img = document.createElement("img");

let tr = document.createElement("tr");
let nameTd = document.createElement("td");
let salaryTd = document.createElement("td");
let jobTd = document.createElement("td");
       //给td设置显示的内容
   nameTd.innerText = i1.value;
   salaryTd.innerText = i2.value;
   jobTd.innerText = i3.value;
        //把td装进tr
   tr.append(nameTd,salaryTd,jobTd);
        //把tr装进table
   table.append(tr);

//实例化对象封装数据
let p1 = {
          name:"张三",
          alary:3000,
          job:"销售"
         }

//数组中装对象
let arr = [
       {name:"张三", salary:3000, job:"销售"},
       {name:"李四", salary:4000, job:"人事"},
       {name:"王五", salary:5000, job:"出纳"}
       ]
//循环遍历
for (let person of arr) {
                        console.log(person.name+":"+person.salary+":"+person.job);
                        let h = document.createElement("h1");
                        h.innerText = person.name+":"+person.salary+":"+person.job;
                        //通过document.body得到body元素对象
                        document.body.append(h);

  <!--从CDN服务器引入VUE框架文件-->
        <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
        <script>
        let v = new Vue({
                 el:"body>div",   //设置VUE框架的管理范围
                 data:{
                       info:"Hello VUE!"
                       }
                       })
         <!--从本地引入VUE框架文件-->
         <script src="js/vue.min.js"></script>
         <!--{{变量}},插值:让当前位置的文本内容和变量进行绑定-->
        {{msg}}
        <h1>{{msg}}</h1>
        <!--v-text="变量": 让元素的文本内容和变量进行绑定-->
        <h1 v-text="msg"></h1>
        <p v-text="msg"></p>
        <!--v-html让元素的标签内容和变量进行绑定-->
        <p v-html="msg"></p>

<!--属性绑定 让元素某个属性的值和变量进行绑定-->
      <a :href="url" >超链接</a>
      <a v-bind:href="url">超链接</a>
      <img :src="imgName" alt="">
      <input type="text" :value="url">
      </div>
      <script src="js/vue.min.js"></script>
      <script>
        let v = new Vue({
            el:"body>div",
            data:{
                url:"http://www.baidu.com",
                imgName:"a.jpg"
            }

 <p>{{url}}</p>

<!--v-model双向绑定,变量url的值会影响文本框的内容, 文本框内容改变也会影响url变量的值-->
<input type="text"  v-model="url" placeholder="请输入访问的地址">
     <a :href="url">超链接</a>
 </div>
 <script src="js/vue.min.js"></script>
 <script>
     let v = new Vue({
         el:"body>div",
         data:{
             url:"http://www.baidu.com"
         }
     })

<!--事件绑定@click和v-on:click, 调用的方法必须写作methods里面
   methods和data是同级关系-->
   <input type="text" v-model="info">
   <input type="button" value="按钮1" @click="f()">
   <input type="button" value="按钮2" v-on:click="f">

f(x){  //  5   2     +     5+2
//eval方法 可以将字符串以JavaScript代码的形式运行
v.result = eval(v.n1+x+v.n2);